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;

}

属性设置完成后,就会出现如下情况:

css制作倒三角

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

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

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

css制作倒三角

是不是很简单呢!!!

上一篇:享元模式 - Flyweight


下一篇:Linux 内核Coding Style整理