你的位置:首页 > 网页设计

[网页设计]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个三角形组成的正方形。如下图:

接下去,只要设置将另外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中不支持,会默认显示如下图: