html - 如何使用 border-radius 在 CSS3 中创建三 Angular 形

Question

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

只是想知道 clip css 属性是否就是答案。

更新:

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

Answer 1

演示

#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 变换旋转它、圆 Angular 并用外框剪裁来实现的。内部元素可以根据需要进行调整，因此具有一定的灵 active 。

http://css3shapes.com/有一些很好的例子(注意页面底部的心脏)

备选方案

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

另请参阅:Raphaël, a library for working with vector graphics on the web