首页 > 代码库 > CSS完成三角形
CSS完成三角形
通过设置div的border属性，来实现！
将div的height和width属性分别设置为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个三角形组成的正方形。如下图：
接下去，只要设置将另外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; }得到如下图：
另外，transparent为颜色值，等同于rgba(0,0,0,0)，透明度为0。然而在IE6中不支持，会默认显示如下图：
CSS完成三角形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。