How to create a triangle in CSS3 using border-radius

Question

I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides bu

Answer 1

If all you want is a right triangle, this should be all you need:

#box {
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid #990000;
  margin: 40px;
}​

No need for border-radius, and certainly not SVG. This should work in all modern browsers, and IE8+ (I still have a hard time calling IE8 modern).

Demo: http://jsfiddle.net/RCzAt/4/

More about CSS triangles: http://css-tricks.com/snippets/css/css-triangle/