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

Demo

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}

This should produce:

The effect is achieved by creating a square, rotating it with a CSS transform, rounding the corners, and clipping it with an outer box. The inner element can be adjusted as desired, so it is somewhat flexible.

http://css3shapes.com/ has some nice examples (note the heart at the bottom of the page)

Alternatives

SVG images support shapes of this type and are supported in all modern browsers. Simple SVGs can be coded by hand as XML, and there are a variety of free/paid editors for working with them.

See also: Raphaël, a library for working with vector graphics on the web