DIV角落的三角形[重复]

Question

我正在尝试构建一个带有切角的 DIV，如下所示：

我只是通过教程做到了右上角，这里是代码：

.lifeatblock {
background-color: #435973 !important;
position:relative;
}

.lifeatblock:after {
content: '';
border-style: solid;
border-width: 0 50px 50px 0;
border-color: transparent #fff transparent transparent;
width: 0;
height: 0;
right: 0;
top: 0;
position: absolute;
}

我尝试使用 :before 构建左下角，但失败了。有谁知道我该怎么做？谢谢。

Answer 1

可以用这样的伪元素来完成！

*{
  margin:0;
  padding:0;
}
.box{
  background-color:blue;
  width:400px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}
.box:before, .box:after{
        content:"";
        position:absolute;
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-bottom: 30px solid white;
    }
 .box:before{
   transform:rotate(-135deg);
     left:-20px;
   bottom:-12.5px;
} .box:after{
   transform:rotate(45deg);
     right:-20px;
   top:-12.5px;
}

<div class="box"></div>