使用 clip-path 绘制多种图形

/* 使用clip-path属性绘制一个三角形 */
.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
 
/* 使用clip-path属性绘制一个圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  clip-path: circle(50%);
}
 
/* 使用clip-path属性绘制一个正方形 */
.square {
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: square(100%);
}
 
/* 使用clip-path属性绘制一个椭圆形 */
.ellipse {
  width: 100px;
  height: 150px;
  background-color: purple;
  clip-path: ellipse(50% 100%);
}
 
/* 使用clip-path属性绘制一个圆角矩形 */
.rounded-rectangle {
  width: 100px;
  height: 100px;
  background-color: yellow;
  clip-path: inset(10% 20% 30% 40% round 50%);
}

这段代码展示了如何使用clip-path属性来绘制不同的图形。每个CSS类定义了一个具有特定背景颜色的容器，并使用clip-path属性来剪裁出特定形状。这些形状包括三角形、圆形、正方形、椭圆形、圆角矩形等。每个值都是根据百分比指定的，使得图形大小和形状可以灵活调整。