用css写一个三角形

1.使用边框特性

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

2.使用伪元素

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