Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Can you draw this shape in css?

    Example - http://www.budgie.richardcmpage.com/Images/IDEA2.png

    Like the rectangle with another tab type bit? Or can another language do it?

    I would like to try and avoid using an image-bg.

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hi,
    It can be made with CSS.
    Two DIVs, the small DIV positined absolute within the other DIV.
    Something similar you can see here: www.coursesweb.net only with HTML - CSS.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MarPlo View Post
    Hi,
    It can be made with CSS.
    Two DIVs, the small DIV positined absolute within the other DIV.
    Something similar you can see here: www.coursesweb.net only with HTML - CSS.

    Thank you.

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I quickly knocked this up. You could even add the shadows using CSS3.

    Code:
    <html>
    <head>
    <style>
    #container {
    width: 800px;
    height: 90px;
    }
    
    #largeBlock {
    width: 100%;
    height: 66%;
    background: #122A0A;
    }
    
    #smallBlock {
    width: 50%;
    height: 34%;
    background: #122A0A;
    float: right;
    margin-right: 8%;
    }
    
    </style>
    </head>
    <body>
    
    <div id="container">
    	<div id="largeBlock"></div>
    	<div id="smallBlock"></div>
    </div>
    
    </body>
    </html>

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by dan-dan View Post
    I quickly knocked this up. You could even add the shadows using CSS3.

    Code:
    <html>
    <head>
    <style>
    #container {
    width: 800px;
    height: 90px;
    }
    
    #largeBlock {
    width: 100%;
    height: 66%;
    background: #122A0A;
    }
    
    #smallBlock {
    width: 50%;
    height: 34%;
    background: #122A0A;
    float: right;
    margin-right: 8%;
    }
    
    </style>
    </head>
    <body>
    
    <div id="container">
    	<div id="largeBlock"></div>
    	<div id="smallBlock"></div>
    </div>
    
    </body>
    </html>
    Wow thanks!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •