布局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,就可以看到以下效果:

 

是不是很简单呢!!!

 

posted on 2017-02-17 15:45  皇室后裔  阅读(396)  评论(0编辑  收藏  举报