4

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

Cornelius
  • 291
  • 2
  • 6
  • 21
  • Its not possible, using the way you are trying. We are using a big sized transparent `border-left` property to fake the trapezoid shape. So, How will the same portion be rounded? – Starx Oct 03 '12 at 14:42
  • This may be of help. It looks similiar: http://stackoverflow.com/questions/8718587/is-it-possible-to-style-a-div-to-be-trapezoidal – Grixxly Oct 03 '12 at 14:49

5 Answers5

7

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

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
7

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/

methodofaction
  • 70,885
  • 21
  • 151
  • 164
3

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/

Puyol
  • 3,084
  • 5
  • 25
  • 33
3

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/

JP_
  • 1,636
  • 15
  • 26
2

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

Community
  • 1
  • 1
gidzior
  • 1,807
  • 3
  • 25
  • 38