CODEWITHSUNDEEP
csscss-shapes
Lisa
Lisa

Reputation: 21

Trapezoid shape with angled top and right side

It is a curved div basically:

curved div

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

Upvotes: 2

Views: 2076

Answers (3)

Mohsen
Mohsen

Reputation: 65785

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.

Upvotes: -1

ThinkingStiff
ThinkingStiff

Reputation: 65351

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

Output:

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

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78530

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

Upvotes: 3

Related Questions