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

[网页设计]CSS 实用技巧:制作三角形


实现如图所示的三角形图标:

html代码如下:

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

css样式:

body{background:#faf7ef;}div{margin:20px auto}div.arrow-up { width:0px; height:0px; border-left:50px solid transparent;  border-right:50px solid transparent;  border-bottom:50px solid #ff0000;  font-size:0px; line-height:0px;} div.arrow-down { width:0px; height:0px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:50px solid #0000ff; font-size:0px; line-height:0px;} div.arrow-left { width:0px; height:0px; border-bottom:50px solid transparent;  border-top:50px solid transparent;  border-right:50px solid #008000;  font-size:0px; line-height:0px;} div.arrow-right { width:0px; height:0px; border-bottom:50px solid transparent;  border-top:50px solid transparent;  border-left:50px solid #ffff00;  font-size:0px; line-height:0px;}

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。