SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trapezoid shapes with CSS3?

    On this site http://localmagic-wide.clickbump.com/

    I have a header element container which creates the blue area at the top of the template (the top background). I want to add some interest or perspective to the bottom horizontal line that defines the bottom border of the container.

    Is this possible with CSS3?

    I tried setting an unusually large border-radius value for one of the corners but it did not have the effect I'm looking for (which is essentially a trapezoid shape. Any ideas?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hello . Who needs CSS3? Border manipulation is the way to go .

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simon/Paul Quiz#12 - Level 2-5</title>
    <style type="text/css">
    
    .a1 span.a {
        border:solid #f60;
        border-left-color:transparent;
        border-width:0 0 .55em .27em;
        border-style: solid dashed;
        float:left;
        width:.28em;
        height:0;
        overflow:hidden;
    }
    .a1 span.b {
        border:solid #f60;
        border-right-color:transparent;
        border-width:0 .27em .55em 0;
        border-style: solid dashed;
        float:left;
        width:.28em;
        height:0;
        overflow:hidden;
    }
    .a1 {
        display:inline;
        float:left;
    }
    .a2 {
        display:inline;
        float:left;
    }
    </style></head><body>
     
    <h1>
        <span class="a1">
            <span class="a"></span>
    	<span class="b"></span>
        </span>
    
    
    </h1>
    
    
    </body></html>
    I don't know how well you are versed in CSS, but there you go.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Scott,

    As Ryan said you can create some diagonal shapes with borders so you could do something like this:

    Code:
    
    header[role="banner"] {
    background:none;
    }
    header[role="banner"]:after {
    	content:" ";
    	display:block; 
    	border-top: 335px solid rgba(0, 204, 255, 0.5);
    	border-left: 150px solid transparent;
    	border-right: 150px solid transparent;
    	height: 0;
    	position:absolute;
    	top:0;
    	right:0;
    	left:0;
    	bottom:0;
    z-index:1;
    }
    .main{z-index:2;position:relative;}
    You can also do some skew and rotate with css3 transforms but support is patchy.

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that's exactly what I was looking for. I tweaked your code a bit in order to get the angle on the bottom rather than the sides (see below).

    It works great, however, the color of the border is hardcoded into the css. Is there any way to use a color gif image for the background (or via generated content) and manipulate its borders to achieve a similar effect?

    Code:
    header[role="banner"] {
    background:none;
    }
    header[role="banner"]:after {
    	content:" ";
    	display:block; 
    	border-top: 700px solid rgba(0, 204, 255, 0.5);
    	border-left: 1950px solid transparent;
    	
    	height: 0;
    	position:absolute;
    	top:0;
    	right:0;
    	left:0;
    	bottom:0;
    z-index:1;
    }
    .main{z-index:2;position:relative;}

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You can just create images which create the shape (though the part curved out needs to match the background, otherwise it won't match and it'll be obvious). Then just apply the images to the container element. You should be able to get away with just making a left and right side image for the curves, and setting a solid background color to fill in the rest .
    If you don't knowhow to do this, just create the images for the left side curve of the shape, and the right side curve, and we'll help you put it on the header.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan, I appreciate your input and I can obviously create an image specifically for this purpose, however, I need a bit more of an evergreen solution in this case (I want to use a single rectangular image that I can recolor via PHP and bend and shape via CSS)

    This is more experimental exercise in what's possible with css than a practical web design problem

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'm wondering whether you could do something with border image also although support is patchy and its a little complex to get working. If maybe you had an image with transparent sections in a trapezoid shape it could be fashioned to work. Haven't got time to play today though

  8. #8
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Bummer for the support in Opera re the css tricks example but neat non the less.
    ictus==""


Bookmarks

Posting Permissions

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