用CSS繪制三角形箭頭。使用純CSS，你只需要很少的代碼就可以
創(chuàng)作出各種瀏覽器都兼容的三角形箭頭！
/* create an arrow that points up */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points down */
div.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #2f2f2f;
font-size: 0;
line-height: 0;
}
/* create an arrow that points left */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-right: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
/* create an arrow that points right */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 5px solid transparent; /* left arrow slant */
border-top: 5px solid transparent; /* right arrow slant */
border-left: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}
繪制這些三角形的關(guān)鍵在于，你要讓箭頭所指方向的兩個側(cè)邊有很粗的邊框。而背向箭頭
方向的一邊也是同樣粗的邊框，而這條邊的顏色就是你的三角形的顏色。邊框越粗，
三角形越大。用這種方法你可以繪制出各種顏色、各種大小、各種朝向的箭頭。
最妙的是，你只需要幾行CSS代碼就能實現(xiàn)這種效果。
【 微信掃一掃 】
