困難的css形狀

Question

是否可以使用單個html元素製作此形狀？

我想用它來裁剪圖像，這就是爲什麼它會更容易，如果它只有一個元素

Answer 1

是否有可能使用一個單一的元素，以使該形狀？

是

div { 
 
    width: 80px; 
 
    height: 140px; 
 
    background: red; 
 
    position: relative; 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 110%; 
 
    height: 60px; 
 
    background: white; 
 
    position: absolute; 
 
    left: -14px; 
 
} 
 
div:before { 
 
    transform: rotate(-20deg); 
 
    top: -40px; 
 
} 
 
div:after { 
 
    transform: rotate(20deg); 
 
    bottom: -40px; 
 
}

<div></div>

注：一些調整，可能需要做得到它，只要你想，但你的想法。

我會推薦使用它進行裁剪嗎？不可以。要創建此形狀，:before和:after元素爲白色（背景色），因此只有具有普通背景時才能使用。它可行但不是最好的。

Answer 2

解決方案1 ​​

如果您正在尋找使用純色背景，你可以看看使用邊界上的一些僞元素。

對於快速演示：

div { 
 
    background:url(http://lorempixel.com/300/300); 
 
    height:300px; 
 
    width:300px; 
 
    position:relative; 
 
} 
 
div:before, div:after { 
 
    content:""; 
 
    position:absolute; 
 
    left:0; 
 
} 
 
div:before{ 
 
    top:0; 
 
    border-right:300px solid transparent; 
 
    border-top:100px solid white;  
 
} 
 
div:after{ 
 
    bottom:0; 
 
    border-right:300px solid transparent; 
 
    border-bottom:50px solid white;  
 
}

<div> 
 
</div>

---

溶液2

另一種方法是使用透視和旋轉（注意加前綴將需要。）：

div{ 
 
    width:200px; 
 
    height:200px; 
 
    transform:perspective(300px) rotateY(-20deg); 
 
    margin-top:50px; 
 
    overflow:hidden; 
 
}

<div> 
 
    <img src="http://lorempixel.com/300/300"/> 
 
</div>

---

替代

另外的替代品包括：

• SVG
• 剪輯路徑（雖然browser support不豔）