CSS中的三角形

100人浏览 2024-08-25 10:03:08

昨天我们用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;

分别给四个边框设置不同的颜色，我们可以看到效果。如下图：

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

下三角

是不是感到很简单呀！不错，就是这么简单。希望对大家有所帮助。

六边形和三角形我们都实现了。明天我们就来实现一个心形效果。

明晚不见不散。