CSS3 : right angled triangle with bow/arc

Question

我正在尝试在 CSS3 中制作一个直 Angular 三 Angular 形，我有这一部分。但是我怎样才能用弧形/弓形制作呢？ (很抱歉，我不知道如何最好地将其翻译成英文)。

这是我需要的:

这可能吗？我该怎么做？

如果我有那个我会很高兴，但如果你们也能告诉我如何让它从底部滑出，让顶部从底部滑出，我会非常非常高兴。如果你也知道，那就太好了!但这不是我目前的主要问题:-)

Answer 1

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

Demo

.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 颜色填充“空白”区域。

Demo

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