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

#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变换旋转它，圆角化，并用一个外部框修剪它，可以达到这种效果。内部元件可以根据需要进行调整，因此具有一定的灵活性。

备择方案
SVG图像支持这种形状，并且在所有现代浏览器中均受支持。简单的SVG可以手工编码为XML，并且有许多免费/收费的编辑器可以使用它们。