[code lang=”html”]
<div class="arrow-up">
<!–向上的三角–>
</div>
<div class="arrow-down">
<!–向下的三角–>
</div>
<div class="arrow-left">
<!–向左的三角–>
</div>
<div class="arrow-right">
<!–向右的三角–>
</div>
[/code]
[code lang=”css”]
/* 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;
}
[/code]
[code lang=”css”]
/* 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;
}
[/code]
[code lang=”css”]
/* 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;
}
[/code]
[code lang=”css”]
/* 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;
}
[/code]
转载请注明：前端收藏 » 利用CSS3实现三角形的制作