css画出渐变色右三角形

CSS可以通过纯CSS3的特性轻松地绘制出渐变色的右三角形。这通常利用伪元素`::before`和`::after`以及`transform`属性来实现。以下是一个简单的示例：

.triangle {
  width: 0;
  height: 0;
  position: relative;
  display: inline-block;
}

.triangle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px; /* 这里的数值等于三角形斜边高度的一半 */
  width: 0;
  height: 10px;
  background: linear-gradient(to right, red, blue); /* 使用渐变颜色 */
  transform: rotate(45deg); /* 创建45度角的三角形 */
}

.triangle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px; /* 同上 */
  width: 0;
  height: 10px;
  background: linear-gradient(to right, yellow, green); /* 另一个渐变颜色 */
  transform: rotate(-45deg); /* 创建-45度角的三角形，使其与前一个三角形形成一个完整的右三角形 */
}