css三角的做法

CSS三角是一个常用的页面装饰元素，可以通过CSS代码来实现。以下是几种常见的CSS三角做法：

/* 方法一：使用border属性 */
.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid black;
  border-bottom: 10px solid transparent;
}

/* 方法二：使用伪元素 */
.arrow::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid black;
  border-bottom: 10px solid transparent;
}

/* 方法三：使用transform属性 */
.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid black;
  transform: rotate(45deg);
} 

方法一是最基本的做法，使用border属性来绘制一个由三条边组成的三角形。border-top和border-bottom设置为透明，只显示border-right，通过调整这三条边的长度和宽度，可以控制三角大小和角度。

方法二是常用的做法，使用伪元素来实现一个与原元素同样大小、同样位置的三角形。通过设置伪元素的border，可以实现与方法一同样的效果。

方法三使用了transform属性来旋转一个矩形，使其成为一个三角形。rotate()函数可以实现旋转，其中参数为角度值，此处为45度。这个做法比较简洁，但是需要了解一些基本的transform操作。