是否可以使用伪元素创建角度切割？

Question

我创造了一个小提琴，以更好地展示我想要问的内容。 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活动类显示彩色背景，底部有一个裁剪角度。

• 它应该适应链接的长度
• 需要透视背景
• 在链接中包含角度部分
• 回应

纯css有可能吗？

Answer 1

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

您可以使用元素本身的颜色作为蒙版，也可以使用背景。不同之处在于您如何定义渐变角度和渐变颜色。

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

你会注意到它是非常锯齿状的，并不像你使用图像那样清晰。我还不确定这方面的解决方法，但不同的浏览器会以不同的方式渲染边缘，所以这至少为您提供了一个起点。

祝你好运！

Answer 2

您可以使用以下三种方法之一来完成此操作：

1. 变换/旋转
2. 边界宽度/边框颜色（透明）
3. 箱阴影