1. 实现一个简单的三角形
使用CSS盒模型中的border(边框)即可实现如下所示的三角形:
![cc1f77855087ad7d25f783bab96133bc.png](https://i-blog.csdnimg.cn/blog_migrate/8115ad3a06fe4fc36166b9766b723474.jpeg)
CSS实现简单三角形
实现原理:
首先来看在为元素添加border时,border的样子;假设有如下代码:
效果图:
![669e5fa6098594dd7b4a8f525c769f60.png](https://i-blog.csdnimg.cn/blog_migrate/7fad414681420bb3508aabaa4ced7bc2.jpeg)
border的一般使用
这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用法就会容易让大家对border的形成方式产生误解,即认为元素的border是由四个矩形边框拼接而成。
然而事实并不是这样。实际上,元素的border是由三角形组合而成,为了说明这个问题,我们可以增大border的宽度,并为各border边设置不同的颜色:
div { width: 50px; height: 50px; border: 40px solid; border-color: orange blue red green;}
效果图:
![76b6a1c18444d4817e52576594632d66.png](https://i-blog.csdnimg.cn/blog_migrate/c5bd0b4ff94111ba59f5c991e7643ae4.jpeg)
border的形成方式
既然如此,那么更进一步,把元素的内容尺寸设置为0会发生什么情况呢?
div { width: 0; height: 0; border: 40px solid; border-color: orange blue red green;}
效果图:
![5b29312831089e2f75943f6a7fdc9e3e.png](https://i-blog.csdnimg.cn/blog_migrate/e1b5317a60a440c141f691118e913e0c.jpeg)
元素内容尺寸为0
我们将惊奇地发现,此时元素由上下左右4个三角形“拼接”而成;那么,为了实现最终的效果,即保留最下方的三角形,还应该怎么做?很简单,我们只需要把其它border边的颜色设置为白色或透明色:
div { width: 0; height: 0; border