CSS绘制三角形

我们都知道html的块框都是一矩形的形式展示,虽然css3可以通过border-radius来让元素变成圆形,但是他归根到底还是一矩形的形式存在。那么如果是想画一个三角形呢?

问题的由来是,前几天看到一个题目,大致要求是通过html+css实现下图中的内容
插入图片

当时一看就震惊了,绘制矩形框好说,绘制圆圈也好说,你让我画两个三角形我就不开心了(其实之前压根没想到那是由两个三角形组合起来的)。没做过啊,还不知道有做三角形的方式诶。于是赶紧把答案翻出来看,知道真相的我笑cry。。。


进入正题,如何用css边框绘制三角形

演示地址:戳我戳我

我们在使用边框的时候一般都是像这样的:
正常使用边框

但其实边框并不是我们想象的矩形条,而是类似于一个梯形的形状
梯形边框


梯形的大小就要取决块框本身的大小和边框的宽度了,当块框的宽度和高度都变成0的时候呢,会出现什么状况?没错,这时候边框就会变成标准的等腰三角形。
三角形边框
下面给出这段css代码

1
2
3
4
5
6
#setup3{
width: 0;
height: 0;
border: 50px solid;
border-color: blue skyblue yellow green;
}


我们在把其他几条边设置成透明状态(border-color:transparent),这样我们看到的就会是一个单纯的三角形了:
隐藏其他三边

1
2
3
4
5
6
7
#setup4{
width: 0;
height: 0;
border-style: solid;
border-width: 50px;
border-color: transparent skyblue transparent transparent;
}

我们通过设置border-width来改变三角形的形状,比如:

1
2
3
4
5
6
7
8
#setup5 div{
width: 0;
height: 0;
display: inline-block;
border-style: solid;
border-width: 30px 50px 20px 50px;
border-color: transparent skyblue transparent transparent;
}

效果图如下:
不同形状的三角形


最后给一个在线的三角形生产器,可以方便查看效果:http://apps.eky.hk/css-triangle-generator/zh-hant