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