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

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); 
} 

什么我希望做的是有李主动类显示彩色背景裁剪底部倾斜。

• 它应该适应链接
• 需要看到通过对背景
• 包括链路内的角部分的长度
• 响应

这是可能的纯粹的CSS？

Answer 1

你可以通过使用以下三种方法之一：

1. 变换/旋转
2. 边框宽度/边框颜色（透明）
3. 的box-shadow

Answer 2

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

您可以使用元素本身的颜色作为蒙版，也可以使用背景。与定义渐变角度和渐变颜色的方式不同。

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

你会发现它是非常参差不齐的，而不是清脆的，如果你要使用的图像。我不确定这个解决方法，但不同的浏览器渲染边缘的方式不同，所以这至少为您提供了一个起点。

祝你好运！