CSS画三角形原理

首先我们定义一个宽和高都为0的盒子，设置40px的边框来看一下效果。 <style> #div1{ width: 0px; height: 0px; border:40px solid red; } </style> <div id="div1"></div>

如果我们把边框的上下左右都设置为不同的颜色，来看下效果

<style> #div1{ width: 0px; height: 0px; border-top: 40px solid red; border-right: 40px solid blue; border-bottom: 40px solid green; border-left: 40px solid pink; } </style>

看图说话，边框的上下左右是这样子的。知道了这个，我们利用边框来设计三角形就很容易了。

把不需要显示的边框部分设置为transparent。

举个栗子：

只显示下边框的绿色三角形

<style> #div1{ width: 0px; height: 0px; border:40px solid transparent; border-bottom: 40px solid green; } </style> 扩展1：    当边框设置为只有上边框、右边框，没有下、左时，如下演示：

#div1{ width: 0px; height: 0px; border-color: red blue green pink; border-style: solid; border-width: 40px 40px 0 0; } 效果为

扩展2：当设置为只有下、左时，结果为

#div1{ width: 0px; height: 0px; border-color: red blue green pink; border-style: solid; border-width: 0 0 40px 40px ; }

扩展3：有右和下。直接上代码了。

#div1{     width: 0px;       height: 0px;       border-color: red blue green pink;     border-style: solid;     border-width: 0 40px 40px 0;

     }

改变了右边框的尺寸：

#div1{     width: 0px;       height: 0px;       border-color: red blue green pink;     border-style: solid;     border-width: 0 80px 40px 0;

     }

扩展4：有上左

#div1{     width: 0px;       height: 0px;       border-color: red blue green pink;     border-style: solid;     border-width: 40px 0 0 40px;

     }

改变了上边框的尺寸：

#div1{

    width: 0px;       height: 0px;       border-color: red blue green pink;     border-style: solid;     border-width: 80px 0 0 40px;

     }

其他都同理，上下拉长和左右拉长就是看哪个方向边框值大