用css画一个三角形

1. 使用border属性：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

该方法通过设置元素的宽度和高度，并通过border属性画出三角形，其中border-left和border-right用于确定横向的底边长，border-bottom用于确定纵向的高。

2. 使用transform属性：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

该方法与第一种方法类似，通过设置元素的宽度和高度，并通过border属性画出三角形，但是通过transform的rotate属性对元素进行旋转，使得实际显示为一个三角形。

3. 使用伪元素：

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
 
.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: transparent red;
}

该方法通过添加一个伪元素(::before)来画出三角形，通过设置伪元素的边框宽度和样式，以及边框颜色来构造三角形。

以上是三种常见的使用CSS画三角形的方法，它们都可以很好地实现画出三角形的效果。