css - 是否可以使用伪元素创建 Angular 切割？

Question

我创建了一个 fiddle 来更好地展示我想问的问题。 angle crop of pseudo element

这是一张显示所需结果的图片:

li.active::after {
    content: '';
    position: absolute;
    background: #fff;
    width: 10em;
    height: 100%;
    height: 20em;
    top: 5%;
    left: 15%;
    transform: rotate(-75deg);
}

我想要做的是让 li active 类显示一个彩色背景，底部有一个裁剪 Angular 。

• 它应该适应链接的长度
• 需要看穿背景
• 在链接中包含 Angular 部分
• 有求必应

这在纯 css 中可行吗？

Answer 1

我发现在纯 CSS 中执行此操作的最佳方法是使用具有线性渐变的 background-image 属性，从一种颜色变为透明。

您可以使用元素本身的颜色作为 mask ，也可以使用背景。不同之处在于您定义渐变 Angular 和渐变颜色的方式。

在这个例子中，我使用了你的对象颜色来获得效果: http://jsfiddle.net/948ud6f7/

您会注意到它非常参差不齐，而且不像使用图像那样清晰。我还不确定解决这个问题的方法，但不同的浏览器会以不同的方式呈现边缘，所以这至少为您提供了一个起点。

祝你好运!