css三角形圆角

CSS三角形圆角

在CSS中，如果想要实现三角形，一般的做法是利用border属性，将一个元素的三个边框设置为 transparent，另一个有颜色的边框设置为相应的宽度和高度，从而完成三角形的绘制。但是，这种绘制三角形的方法在实现圆角效果时就会遇到问题，即圆角的部分也会被遮盖住，无法显示出来。

不过，我们可以使用一些技巧，来实现同时拥有圆角和三角形的效果。

.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid #f00;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f00;
  border-right: 10px solid transparent;
  border-top-right-radius: 10px;
  transform: rotate(45deg);
} 

在上面的代码中，我们使用了transform: rotate(45deg)来旋转三角形，并在添加完三角形之后，使用border-radius来控制圆角效果。

同样的，我们也可以用伪元素来实现这个效果：

.arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid #f00;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f00;
  border-right: 10px solid transparent;
  border-top-right-radius: 10px;
  transform: rotate(45deg);
}
.arrow {
  position: relative;
  display: inline-block;
  background-color: #f00;
  padding: 10px;
  border-radius: 10px;
} 

通过使用伪元素，我们可以将三角形和背景分离开来，从而更好地控制圆角数量和大小。

最终效果展示：