CSS 三角形

2022年7月13日小于 1 分钟

使用 CSS 实现三角形

border-color

如果想实现其中的任一个三角形,把其他方向上的 border-color 都设置成透明即可。

.triangle {
  height:0;
  width:0;
  border-color:red transparent transparent transparent;
  border-style:solid;
  border-width:30px;
}

clip-path

MDN 上的介绍:chip-pathopen in new window

.triangle {
  width: 30px;
  height: 30px;
  background: red;
  clip-path: polygon(0px 0px, 0px 30px, 30px 0px); // 将坐标(0,0),(0,30),(30,0)连成一个三角形
  transform: rotate(225deg); // 旋转225,变成下三角
}