使用纯CSS创建三角形形状

• 2019 年 12 月 27 日
• 筆記

如何在页面中实现三角形，有以下几种方式；

一、使用css绘制三角形

HTML代码：

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

CSS代码：

（1）箭头向上

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

（2）箭头向右

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

（3）箭头向下

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

（4）箭头向左

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

（5）箭头向右上

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

（6）箭头向右下

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

（7）箭头向左下

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

（8）箭头向左上

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

颜色调整更改#333，更改为合适颜色。

二、使用图片

图片方式就是由美工设计并制作，利用css代码通过背景图片来实现

实例图片：

示例代码

HTML：

<div id="box"></div>

CSS：

#box{      width: 400px;      height: 300px;      border:solid 2px #999;      border-radius: 5px;      margin:0 auto;      background:url('./ershisi.png');      background-size: 50%;      background-repeat: no-repeat;      background-position: 30px 30px;  }