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?

Hello :). Who needs CSS3? Border manipulation is the way to go ;).

<!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.

Hi Scott,

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




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.

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?

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;}

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.

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 :wink:

I’m wondering whether you could do something with border image also although support is patchy and its a little [URL=“http://border-image.com/”]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 :slight_smile:

Bummer for the support in Opera re the css tricks example but neat non the less.