css三角形怎么加圆角

在 CSS 中，我们经常使用三角形来作为界面元素的一部分。如果想要让三角形拥有圆角，这里有一些方法：

/* 等腰三角形 */
.triangle {
  width: 0;
  height: 0;
  border-bottom: 20px solid #333; /* 改变三角形大小 */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top-left-radius: 10px; /* 加入圆角 */
  border-top-right-radius: 10px;
}

/* 直角三角形 */
.right-triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333; /* 改变三角形大小 */
  border-left: 20px solid transparent;
  border-bottom-right-radius: 10px; /* 加入圆角 */
}

/* 等边三角形 */
.equilateral-triangle {
  width: 0;
  height: 0;
  border: 20px solid #333; /* 改变三角形大小 */
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-left-radius: 10px; /* 加入圆角 */
  border-top-right-radius: 10px;
} 

以上就是三种方法，具体可根据实际需求选择使用。