CSS SNIPPET

  返回

用纯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;
}
效果演示
代码说明
  • 访问这个链接以查看详细解释。
  • 边框的颜色就是三角形的颜色。
  • 可以尝试修改 px 值来改变三角形的比例。
浏览器支持

100.0%