困难的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不艳）