使用纯CSS创建三角形形状。

>>> 效果预览

使用纯CSS创建三角形形状。

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #333;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

说明

1. 边框的颜色是三角形的颜色。 三角形尖端点的边对应于相反的border-*属性。 例如， border-top的颜色表示箭头指向下方。
2. px值来改变三角形的比例。