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

Question

我正在使用border-radius属性来实现圆角。但是我不确定如何获得这种形状的圆角。我尝试
从两边给出相同的尺寸，但它们只是没有给我确切的形状。我在这里缺少一些CSS3属性吗？

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;

}


<div id="player">

  <div id="outer">

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

  </div>

</div>

这应该产生：

通过创建一个正方形，使用CSS变换旋转它，圆角化，并用一个外部框修剪它，可以达到这种效果。内部元件可以根据需要进行调整，因此具有一定的灵活性。

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