CSS画三角形原理

·  阅读 395

HTML代码:

<div id="demo"></div>
复制代码

CSS:

#demo{
            width:100px;
            height:100px;
            border:3px red solid;
        }
复制代码

它的效果是这样的:

更进一步想想border-top、border-bottom、border-right、border-left是如何划分的呢,试一下呗:

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

可以看到每个border都是一个梯形,并不是我以为的矩形。

记住我们的目标:三角形,试试把div的宽高变为零,效果如下:

接下来隐藏三个三角形,留下一个即可完成目标:

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

CSS简直深不可测啊,它还能画出更多形状

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改