CSS中的三角形
昨天我们用CSS实现了六边形的效果,今天,我们就来尝试实现三角形的效果!
三角形具有很大的应用场景,一般用在导航栏和选项卡按钮。
之前都是用字体图标来代替三角形,今天,我们就做属于自己的三角形。

用到的知识点:
border(边框)
div元素,宽高分别为0;
width:0px;
height : 0px;
然后给一个div分别设置四个边框,四个边框的宽度是相等的,这里我们设置为100px。
border-top: 100px solid red;
border-left: 100px solid yellow;
border-right: 100px solid green;
border-bottom: 100px solid blue;
分别给四个边框设置不同的颜色,我们可以看到效果。如下图:

可以看到,这里有四个不同颜色的三角形。如果我们将其中三个的颜色设置为透明色,就会得到想对应的三角形。

下三角
是不是感到很简单呀!不错,就是这么简单。希望对大家有所帮助。
六边形和三角形我们都实现了。明天我们就来实现一个心形效果。
明晚不见不散。