css 不使用渐变色切掉四个小三角

可以使用CSS的border属性和伪元素实现切掉四个小三角的效果，不需要使用渐变色。以下是一个例子：

HTML代码：

<div class="triangle"></div>

CSS代码：

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.triangle:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  border-left: 10px solid black;
}

.triangle:after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  border-top: 10px solid black;
  border-right: 10px solid black;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
}

这里使用伪元素:before和:after来创建两个小三角，分别位于div的左上角和右下角。通过设置border属性的边框样式为实线或透明，可以实现切掉小三角的效果。