困难的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并不精彩）