Trapezoid shape with angled top and right side

Question

It is a curved div basically:

So it is possible to do with just CSS and no images?

Answer 1

Well... I was the biggest skeptic of this shape, but it seems it is possible O_o

Demo

HTML

<div class="shape one"></div>
<div class="shape two"></div>
<div class="shape three"></div>

CSS

.shape
{
    background:red;
    float:left;
}

.one
{
    border-width:0px;
    border-bottom:10px solid red;
    border-left:200px solid #fff;
    width:0px;
}

.two
{
    width:200px;
    height:40px;
    clear:left;
}

.three
{
    border-width:0px;
    border-top:50px solid red;
    border-right:10px solid #fff;
    width:0px;
    margin-top:-10px;
}

Answer 2

The border method looks grainy in the browsers I tested. Here's a method using the ::before and ::after pseudo-elements and CSS transform: skew() that looks smoother. You can adjust the angles as needed. This uses only one <div> .

Demo:

Output:

HTML:

<div class="quadrilateral"></div>

CSS:

.quadrilateral {
    background-color: red;
    height: 50px;
    margin: 50px;
    position: relative;
    width: 300px;
}
.quadrilateral::before {
    background-color: red;
    content: '';
    display: inline-block;
    height: 61px;
    position: absolute;
    right: -3px;
    top: -11px;
    transform:             skewX( -5deg ); 
        -ms-transform:     skewX( -5deg ); 
        -webkit-transform: skewX( -5deg ); 
        -o-transform:      skewX( -5deg ); 
        -moz-transform:    skewX( -5deg ); 
    width: 10px;
}
.quadrilateral::after {
    background-color: red;
    content: '';
    display: inline-block;
    height: 15px;
    position: absolute;
    top: -6px;
    transform:             skewY( -2deg ); 
        -ms-transform:     skewY( -2deg ); 
        -webkit-transform: skewY( -2deg ); 
        -o-transform:      skewY( -2deg ); 
        -moz-transform:    skewY( -2deg ); 
    width: 300px;
}

Answer 3

Instead of CSS, consider using SVG. It's supported in all major browsers and that shape would be very very small in SVG format. It also would be in your DOM tree so you could bind events on it.