星空网 > 软件开发 > 网页设计

CSS完成三角形

通过设置div的border属性,来实现!

将div的heightwidth属性分别设置为0px,将4边的border值设置为一样的宽度,通过调节边框的颜色课看到效果。

<style>  div{height: 0px;width: 0px;    border-top: 20px solid red;    border-left: 20px solid blue;    border-right: 20px solid gray;    border-bottom: 20px solid pink;  }  </style></head><body>  <div></div></body>

即可得到一个由4个三角形组成的正方形。如下图:

CSS完成三角形

接下去,只要设置将另外3边的颜色去掉就可以得到三角形,此时设置border-color为transparent,此时就能得到三角形。

div{height: 0px;width: 0px;    border-top: 20px solid red;    border-left: 20px solid transparent;    border-right: 20px solid transparent;    border-bottom: 20px solid transparent;  }

得到如下图:

CSS完成三角形

另外,transparent为颜色值,等同于rgba(0,0,0,0),透明度为0。然而在IE6中不支持,会默认显示如下图:

CSS完成三角形

 




原标题:CSS完成三角形

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流