<div class="arrow-up"> <!--向上的三角--> </div> <div class="arrow-down"> <!--向下的三角--> </div> <div class="arrow-left"> <!--向左的三角--> </div> <div class="arrow-right"> <!--向右的三角--> </div>
/* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:50px solid transparent; /* left arrow slant */ border-right:50px solid transparent; /* right arrow slant */ border-bottom:50px solid #f00; /* bottom, add background color here */ font-size:0px; line-height:0px; }
/* create an arrow that points down */ div.arrow-down { width:0px; height:0px; border-left:50px solid transparent; border-right:50px solid transparent; border-top:50px solid #ff0; font-size:0px; line-height:0px; }
/* create an arrow that points left */ div.arrow-left { width:0px; height:0px; border-bottom:50px solid transparent; /* left arrow slant */ border-top:50px solid transparent; /* right arrow slant */ border-right:50px solid #f0f; /* bottom, add background color here */ font-size:0px; line-height:0px; }
/* create an arrow that points right */ div.arrow-right { width:0px; height:0px; border-bottom:50px solid transparent; /* left arrow slant */ border-top:50px solid transparent; /* right arrow slant */ border-left:50px solid #0ff; /* bottom, add background color here */ font-size:0px; line-height:0px; }
转载请注明:前端收藏 » 利用CSS3实现三角形的制作