css - CSS3：带弓/弧的直角三角形

Question

我正在尝试在 CSS3 中制作一个直角三角形，我拥有的那部分。但是我怎样才能用弧/弓来制作呢？（对不起，我不知道如何最好地将它翻译成英文）。

这是我需要的：

这可能吗？我该怎么做？

如果我有这个我很高兴，但我真的很高兴，如果你们也可以告诉我如何让它从底部滑出，以便顶部从底部滑出。如果你也知道这一点，那就太好了！但这不是我目前的主要问题:-)

Answer 1

可以通过将 aborder-radius应用于覆盖元素来完成。

演示

.angled-triangle {
    background-color:orange;
    width:200px;
    height:50px;
    position:relative;
    overflow:hidden;
    padding-left:5px;
    background-clip:content-box;
}

.angled-triangle::before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background-color:white; /*same as element's parent background*/
    border-bottom-right-radius: 99% 90%;
    left:5px; /*push edge out of element*/
}

在最新的 Chrome 和 Firefox 中测试。根据需要随意调整这些值。

这种方法的唯一缺点是您需要将其应用于background-color元素::before父级的背景，这并不总是可行的（例如body，使用背景图像）。检查下面的更新以获取没有此限制的另一种方法。

更新

另一种可行的方法是使用径向渐变背景。与上述方法不同，此方法不存在任意元素背景的问题，因为此方法使用transparent颜色填充“空白”区域。

演示

.angled-triangle {
    width:200px;
    height:50px;
    background-image: -moz-radial-gradient(0 0, transparent 70%, orange 71.5%);
    background-image: -webkit-radial-gradient(0 0, transparent 70%, orange 71.5%);
    background-image: radial-gradient(top left, transparent 70%, orange 71.5%);
    background-position: 5px 0px;
    background-repeat:no-repeat;
}

上面，orange代表您希望三角形的颜色。透明和橙色之间只是“1.5%缓和”，因此边框看起来不会像素化。因为我没有在这些浏览器中测试过，所以缺少供应-ms商前缀。-o