css实现一个div的四个角都被透明三角形切掉

要实现一个div的四个角都被透明三角形切掉，可以使用CSS的伪元素和transform属性来实现。

首先，创建一个div，并添加一个类名，例如"cut-corner-div"：

<div class="cut-corner-div"></div>

然后，在CSS中定义这个类名的样式：

.cut-corner-div {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #000;
  overflow: hidden;
}

.cut-corner-div:before,
.cut-corner-div:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.cut-corner-div:before {
  top: 0;
  left: 0;
  border-width: 0 200px 200px 0;
  border-color: transparent transparent #000 transparent;
  transform: rotate(180deg);
}

.cut-corner-div:after {
  bottom: 0;
  right: 0;
  border-width: 0 0 200px 200px;
  border-color: transparent transparent #000 transparent;
  transform: rotate(180deg);
}

在上述样式中，我们使用:before和:after伪元素来创建两个三角形。通过定义border-width和border-color来控制三角形的大小和颜色。通过transform: rotate(180deg)来旋转三角形，使其朝向角落。

最后，给div添加一个背景颜色，这样被切掉的角落就会呈现透明的效果。

你可以根据需要调整div的大小、颜色和形状，以达到你想要的效果