×

CSS画三角形原理

96
angryyan
2017.05.29 14:17* 字数 391

使用纯CSS画三角形,记得去年自己就碰到过。但是当时只是一味的在网上粘贴复制了写代码,并没有深究其原理。今天特地写一个学习笔记,记录一下。
大家都知道的盒模型,默认情况下形状是矩形的。下图为设置了width=200px div的盒模型。

盒模型

下面我们来看一看border。
html代码:

<div id="demo"></div>

css:

#demo{
            width:100px;
            height:100px;
            border:3px red solid;
        }

效果如图所示:


border

以上的效果我相信,只要学过前端的都会。
但是你知道border-top border-bottom border-right border-left到底是怎么划分的吗??反正我之前是不知道的,下面我们来看看。

#demo{
             width:100px;  
             height:100px;  
             border: 20px solid;  
             border-color: red blue red blue; 
        }

从图中我们可以看到每个border都是一个梯形,这并不像我之前以为的矩形。
接下来让我们,我们把div元素的宽变为0,这种情况下border又会是怎么变化的呢?(从图中我们可以每个border都是一个梯形,其中梯形的上底边等于div的width。为了把梯形变为三角形,我们就要缩小div的width。)

#demo{
             width:0px;  
             height:0px;  
             border: 40px solid;  
             border-color: red blue red blue; 
        }

在这种情况下,4个梯形变成了4个个三角形。那么到这里我们也就知道了如何使用CSS画三角形了。

#demo{
             width:0px;  
             height:0px;  
             border:40px solid transparent;
             border-bottom:80px solid red;
        }


我们把其他3条边设为transparent,就会得到如图所示的三角形。在这里border-bottom的width控制了三角形的高。
如果我们再把一条边设为0,又会变成什么样的呢??

这样我们就得到了一个直角三角形。我们使用CSS还能画出其他的形状,具体请参考下面的链接:
https://css-tricks.com/examples/ShapesOfCSS/

遇到问题,自己动手试试,就会豁然开朗的。
以下为参考资料:
https://www.zhihu.com/question/35180018
http://www.tuicool.com/articles/3eaINn

CSS
Web note ad 1