Rounded trapezoid with CSS

Question

I have a little problem with css. I need a trapezoidal div whose upper left corner (angle with an angle above 90 degrees) is rounded. I already know what this is:

HTML:

<div style="margin:30px"> <div class="trapezoid"> </div> </div> 

CSS

 .trapezoid{ vertical-align: middle; border-bottom: 31px solid red; border-left: 25px solid transparent; height: 0; width: 150px; } 

creates a trapezoid. I tried the border-top-left-radius property, however the effect is not enough.

Here's the jsfiddle with the code above, well, squeak with http://jsfiddle.net/n3TLP/5/

I need more information, just comments.
Thanks in advance:)

Answer 1

Although I think you are better off using <canvas> / SVG to draw this shape, this is close to what you want:

 .trapezoid{ vertical-align: middle; border-bottom: 120px solid red; border-left: 200px solid transparent; border-top-left-radius:30px; height: 0; width: 150px;} /* ---------- */ .trapezoid { position:relative; } .trapezoid:after { content:' '; left:-14px; top:-10px; position:absolute; background:red; border-radius:40px 0 0 0; width:164px; height:40px; display:block; } 

Demo: http://jsfiddle.net/n3TLP/20/

This is not ideal, and you have to play with numbers to get the desired sizes, it is very skillful. You might be interested in something like Raphaël for drawing, CSS really does not have the ability for complex shapes (at least not intentionally).

Answer 2

Not that you did this, but you can also create a rounded corner trapezoid with one element using 3D CSS transforms:

 .trapezoid { position: relative; width: 300px; height: 200px; overflow: hidden; } .trapezoid:after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: red; border-radius: 20px 0 0 0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: perspective(400px) rotateX(45deg); -moz-transform: perspective(400px) rotateX(45deg); -ms-transform: perspective(400px) rotateX(45deg); -o-transform: perspective(400px) rotateX(45deg); transform: perspective(400px) rotateX(45deg); } 

http://jsfiddle.net/RzJTP/

Answer 3

Here is my attempt lol

 .trapezoid{ position:relative; border-bottom: 100px solid blue; border-right: 12px solid transparent; border-left: 180px solid transparent; width: 122px; } .trapezoid:before{ content:' '; left:-184px; top:98px; position:absolute; background:blue; border-radius:80px 20px 80px 80px; width:318px; height:20px; } .trapezoid:after { content:' '; left:-11px; top:-7px; position:absolute; background:blue; border-radius:150px 50px 90px 0px; width:133px; height:30px; } <div style="margin:30px"> <div class="trapezoid"> </div> </div> 

http://jsfiddle.net/Bzj3h/

Answer 4

Use Adobe Illustrator or any other drawing software and save as an SVG code, you can use SVG directly on the page, but IE8 and below will ignore it. If you need to support older versions of IE, you can use Raphael.js to draw your SVG element.

Rendering SVG polygons in the Javascript Raphael library

Answer 5

Voila:

css:

 .trapezoid{ vertical-align: middle; background: red; padding-left: 200px; height: 120px; width: 150px; position: relative; border-top-left-radius: 40px; overflow: hidden; background-clip: content-box; } .trapezoid:after{ content: ''; margin-left: -100px; top: 0; height: 120px; background: red; transform: skew(-31deg,0deg); -o-transform: skew(-31deg,0deg); -ms-transform: skew(-31deg,0deg); -moz-transform: skew(-31deg,0deg); -webkit-transform: skew(-59deg,0deg); position: absolute; width: 1000px; border-top-left-radius: 40px; } 

Demo:
http://jsfiddle.net/n3TLP/24/