昨天我们用CSS实现了六边形的效果,今天,我们就来尝试实现三角形的效果!
三角形具有很大的应用场景,一般用在导航栏和选项卡按钮。
之前都是用字体图标来代替三角形,今天,我们就做属于自己的三角形。
![1cd4d9bd8e7cbdea7db9e2af51e5460a.png](https://i-blog.csdnimg.cn/blog_migrate/7c6a7fcb4e59887698a42c16ab35cc18.jpeg)
用到的知识点:
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;
分别给四个边框设置不同的颜色,我们可以看到效果。如下图:
![413cb4bb2c64443ce0e28c1c8998d78c.png](https://i-blog.csdnimg.cn/blog_migrate/ba98eb06d302e1881967fb09cf28a5ac.jpeg)
可以看到,这里有四个不同颜色的三角形。如果我们将其中三个的颜色设置为透明色,就会得到想对应的三角形。
![6b3063f80f31f8c90c993a234705f932.png](https://i-blog.csdnimg.cn/blog_migrate/e2fed11ad32e636e1f993f5a4f5b4892.jpeg)
下三角
是不是感到很简单呀!不错,就是这么简单。希望对大家有所帮助。
六边形和三角形我们都实现了。明天我们就来实现一个心形效果。
明晚不见不散。