css制作倒三角

布局div，并命名为id="dropdown",在style使用border属性对div进行控制

#dropdown{

　　width:0px;

　　height:0px;

　　border-top:30px solid red;

　　border-right:30px solid blue;

　　boder-bottom:30px solid green;

　　border-left:30px solid yellow;

 

}

属性设置完成后，就会出现如下情况：

相信看到这里大家都会明白了如何使用border属性制作倒三角了。

接下来只要根据我们自己的需求更改border的属性就可以得到我们想到的结果了。

如：除了border-top的属性不变以外，其余的属性全部变为white，就可以看到以下效果：

 

是不是很简单呢！！！

 

转载于:https://www.cnblogs.com/liuyuyan/p/6410177.html