使用css实现右下角有三角的切角效果

要实现一个右下角有三角切角效果，你可以使用 CSS 的伪元素 ::after 和线性渐变或者利用 clip-path。以下是两种方法的示例：

方法一：使用伪元素和线性渐变

HTML:

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

CSS:

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

.cut-corner::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(to top left, transparent 50%, #ff0000 50%);
}

这种方法创建了一个伪元素，并将其定位在容器的右下角。伪元素的背景是一个线性渐变，从右下角（透明）到左上角（与主背景相同的颜色）。通过调整渐变的角度和位置，你可以控制切角的大小和形状。

方法二：使用 clip-path

HTML:

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

CSS:

.cut-corner-clip {
  width: 200px;
  height: 200px;
  background: #ff0000;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}

这种方法使用了 CSS 的 clip-path 属性来创建一个多边形裁剪路径。通过定义多边形的顶点，你可以控制切角的位置和大小。在这个例子中，我们定义了一个五边形，其中右下角的顶点被“切掉”了。

这两种方法都可以实现右下角有三角切角的效果，你可以根据自己的需求和喜好选择适合的方法。