css制作倒三角

2023-06-26,

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

是不是很简单呢!!!

css制作倒三角的相关教程结束。

《css制作倒三角.doc》

下载本文的Word格式文档,以方便收藏与打印。