是否可以使用僞元素創建角度切割？

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/

你會發現它是非常參差不齊的，而不是清脆的，如果你要使用的圖像。我不確定這個解決方法，但不同的瀏覽器渲染邊緣的方式不同，所以這至少爲您提供了一個起點。

祝你好運！