用css繪製三角形箭頭。使用純css，你只需要很少的**就可以創作出各種瀏覽器都相容的三角形箭頭！
css**:/* 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;
繪製這些三角形的關鍵在於，你要讓箭頭所指方向的兩個側邊有很粗的邊框。而背向箭頭方向的一邊也是同樣粗的邊框，而這條邊的顏色就是你的三角形的顏色。邊框越粗，三角形越大。用這種方法你可以繪製出各種顏色、各種大小、各種朝向的箭頭。最妙的是，你只需要幾行css**就能實現這種效果。
css畫橫線箭頭 CSS繪製箭頭
實際需求中，很多時候都會有箭頭的情況，只不過一開始總是喜歡找別人寫好的，隨著需求的增加，很難通過修改來滿足需求，所以理解原理自己動手才是萬難的根本解決辦法。一 繪製三角 容器 樣式 container width 0 height 0 border 50px solid border color r...
css畫橫線箭頭 用CSS繪製三角形箭頭
用css繪製三角形箭頭。使用純css，你只需要很少的 就可以創作出各種瀏覽器都相容的三角形箭頭！css create an arrow that points up div.arrow up width 0 height 0 border left 5px solid transparent lef...
css畫橫線箭頭 用純CSS實現的箭頭
用css即可繪製出各種箭頭，無需裁剪，甚至沒有用到css3的東西。對瀏覽器支援良好。基本原理 原理非常簡單，通過擷取border 邊框 的部分 拐角 實現，幾行css 即可理解 乙個梯形 當元素寬 高和邊框的寬相近 等 時，改變某一邊的顏色可以看到乙個梯形 demo11 border 10px so...