如何在CSS3中使用边框半径创建三角形

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 but they just dont give me the exact shape. Am I missing some CSS3 property here.

只是想知道 Clip CSS 属性是否是答案。

UPDATE:

http://jsfiddle.net/YWnzc/136/ http://jsfiddle.net/YWnzc/136/

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

<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

这应该产生：

该效果是通过创建一个正方形、使用 CSS 变换对其进行旋转、将角变圆并使用外框对其进行裁剪来实现的。内部元件可以根据需要进行调整，因此具有一定的灵活性。

http://css3shapes.com/ http://css3shapes.com/有一些很好的例子（注意页面底部的心形）

备择方案

SVG 图像支持这种类型的形状，并且在所有现代浏览器中都受支持。简单的 SVG 可以手动编码为 XML，并且有多种免费/付费编辑器可以使用它们。

也可以看看：Raphaël，用于在网络上处理矢量图形的库 http://dmitrybaranovskiy.github.io/raphael/