css实现三角形

喜欢ヅ旅行 2022-07-12 07:08 272阅读 0赞

css可以实现各种各样的三角形，减少了切图加载图片，以下是各种三角形的实现方法。

1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。

<html>
    <head>
    <style type="text/css"> #test{ width:20px; height:20px; border-width:15px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda; } </style>
    
    </head>
    <body>
    <div id="test">
    </div>
    </body>
    </html>

显示效果如图所示：  
![这里写图片描述][SouthEast]  
可以看出每个边都是一个梯形

2.设置盒子的宽和高为0

#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:#e66161 #f3bb5b #94e24f #85bfda; }

![这里写图片描述][SouthEast 1]

当盒子的宽和高都是0时，边框显示为三角形。由此可以看出，如何实现各种三角形。如果想实现倒三角，则其他的边为transparent，只设置最上面的边有颜色，则可以实现倒三角，同理可以实现各种三角形。

3.各种三角形的实现

（1）倒三角的实现

#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:green transparent transparent transparent; }

![这里写图片描述][SouthEast 2]

（2）向上三角的实现（只需要保留下面的边）

#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:transparent transparent green transparent; }

![这里写图片描述][SouthEast 3]

（3）向右三角的实现（保留左面的边）

#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:transparent transparent transparent green; }

![这里写图片描述][SouthEast 4]

（4）向左三角的实现（保留右面的边）

#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:transparent green transparent transparent ; }

![这里写图片描述][SouthEast 5]

（5）保留上边和右边组成三角形

#test{ width:0px; height:0px; border-width:20px; border-style:solid; border-color:green green transparent transparent ; }

![这里写图片描述][SouthEast 6]

（6）

#test{ width:0px; height:0px; border-left: 150px solid green; border-right: 150px solid green; border-bottom: 50px solid gray; }

![这里写图片描述][SouthEast 7]

由于没有上边，所以左右的三角形都变成一半，只显示了下边部分。若只设置左右不设置上下，则左右的边无法显示。

[SouthEast]: /images/20220711/31952631ac3f46a69e473c24a634c8cd.png
[SouthEast 1]: /images/20220711/062bd5f9008843a6997f3a5aadb29ca0.png
[SouthEast 2]: /images/20220711/fb96659987a94aae8eed97a9bd4ced95.png
[SouthEast 3]: /images/20220711/2d24085386154aea835f68e7348aa8a4.png
[SouthEast 4]: /images/20220711/d8f703cf2e89419481490e2d8ec139de.png
[SouthEast 5]: /images/20220711/34f7736e6b32472e95059af4dcb636e3.png
[SouthEast 6]: /images/20220711/a4e1e22e51004665a992a106a1674da5.png
[SouthEast 7]: /images/20220711/91ad80bd283e470ab29c28f56a3c7bbb.png