Rounded trapezoid with CSS

Question

I'm having a slight problem with css. I need a trapezoid div which upper left corner(the one with the angle above 90 degrees) is rounded. I already know that this:

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

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

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

I there is more info needed just comment.
Thanks in advance :)

Answer 1

Not that you should ever do this, but you can also create a rounded corner trapezoid with a single element by applying CSS 3d transformations:

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

Although I think you're 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/

It's not perfect, and you'll have to play with the numbers to get your desired dimensions, it's very finicky. You might be interested in something like Raphaël for drawing, CSS doesn't really have the capacity for complex shapes (at least not intentionally).

Answer 3

Use Adobe Illustrator or any other software to draw a shape and than save it as SVG code, you can use SVG directly on the page but IE8 and lower 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 Raphael Javascript library

Answer 4

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/

Answer 5

Here's 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/