CODEWITHSUNDEEP
css
user2977789
user2977789

Reputation: 15

Make a trapezoid with css3 border radius

I want to make a trapezoid with border radius like this picture. Is it possible?

this image

I tried this code but it does not work

background: #BE1E2D;
width: 130px; 
height: 75px;
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg);
transform: skew(20deg);

Upvotes: 0

Views: 2371

Answers (3)

Turnip
Turnip

Reputation: 36662

I don't see how you could do this with border-radius (or why you would want to)

You can do it with a simple skew:

#shape {
    width: 150px;
    height: 50px;
    -webkit-transform: skew(-25deg);
       -moz-transform: skew(-25deg);
         -o-transform: skew(-25deg);
    background: darkred;
}

DEMO

Upvotes: 0

Ranveer
Ranveer

Reputation: 6863

Try this. Doesn't use border-radius though.

.trapezoid{
     width:100px; 
     height:100px; 
     border:1px solid #000; 
     background:yellow;
     transform: skew(-20deg); 
     -o-transform: skew(-20deg); 
     -moz-transform: skew(-20deg); 
     -webkit-transform: skew(-20deg);
}

Upvotes: 0

Albzi
Albzi

Reputation: 15609

Visit this website to look at how a lot of shapes are done.

For this shape though (as it is on the website), you need this:

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: red;
}

Upvotes: 1

Related Questions