用 CSS 畫箭頭

第一次看到有人用 div + css 畫三角形，覺得非常有意思，第一個想到的方法是利用 clip-path 來畫，這個方式最直覺，後來發現他用的是邊框，方法如下 : ``` $mmcode(r1) ``` <div class="mmresult r1"> <style> .a06031_1 { width:2em; height:2em; border-width:2em 2em 2em 2em; border-style:solid; border-color:#ffff00 #aaffaa #aaaaff #ffaaff; } </style> <div class="a06031_1"></div> </div> 由這裡可以看到，加厚的邊框變成了梯形, 如果把本來的 div 寬度設 0 ，然後把不要的邊框設為透明，那麼三角形就出現了 ``` $mmcode(r2) ``` <div class="mmresult r2"> <style> .a06032_1 { width:0em; height:0em; border-width:1em 2em 1em 0em; border-style:solid; border-color:transparent #aaffaa transparent; } </style> <div class="a06032_1"></div> </div> 同理，還可以畫梯形 那麼這篇的目的是畫箭頭, 這裡我打算用 ::before 來畫 ``` $mmcode(r3) ``` <div class="mmresult r3"> <style> .a06033_1 { position:absolute; width:5em; height:0.4em; background-color:#ff0000; transform-origin: -1em 0.2em; transform:translate(1em, -0.2em) rotate(0deg); } .a06033_1::before { position:absolute; content: ""; width:0; height:0; transform:translate(-0.9em, -0.3em); border-width:0.5em 1em 0.5em 0em; border-style:solid; border-color:transparent #ff0000 transparent; } </style> <br> <div class="a06033_1"></div> <div class="a06033_1" style="font-size:0.7em;transform:translate(1em, -0.2em) rotate(70deg);width:3em"></div> <br><br><br> </div> 以後如果需要用到箭頭，就可以引用這個 CSS 然後設定 width , left 和 top , 以及 font-size 來修改大小，然後用 transform rotate 來旋轉，這會是個使用上相當方便的箭頭 既然箭頭都畫了，順便把一些常用的畫一畫 ``` $mmcode(r4) ``` <div class="mmresult r4"> <style> .a06034_bk { display:inline-block; width:4.2em; height:4.2em; border:1px solid #aaa; } .a06034_o { position:absolute; border-radius:100em; width:1em; height:1em; border:1px solid #000; } .a06034_x { position:absolute; width:1.5em; height:0.2em; background-color:#f00; transform:translate(-0.05em,0.6em) rotate(45deg); } .a06034_x::before { content:""; position:absolute; width:0.2em; height:1.5em; background-color:#f00; transform:translate(0.65em,-0.65em); } .a06034_plus { position:absolute; width:1.4em; height:0.2em; background-color:#f00; transform:translate(0em,0.6em); } .a06034_plus::before { content:""; position:absolute; width:0.2em; height:1.4em; background-color:#f00; transform:translate(0.6em,-0.6em); } .a06034_ok { position:absolute; width:0.5em; height:1em; border-width:0em 0.2em 0.2em 0em; border-style:solid; border-color:#0f0; transform:translate(0.35em,0em) rotate(45deg); } .a06034_play { position:absolute; width:1em; height:1em; background-color:#0af; border-radius:100em; transform:scale(1.3) translate(0.15em,0.15em); } .a06034_play:before { content:""; position:absolute; width:0em; height:0em; border-width:0.5em 0em 0.5em 1em; border-style:solid; border-color:transparent transparent transparent #ff0; transform:scale(0.5) translate(0.1em,0em); } .a06034_stop { position:absolute; width:1em; height:1em; background-color:#0af; border-radius:100em; transform:scale(1.3) translate(0.15em,0.15em); } .a06034_stop:before { content:""; position:absolute; width:1em; height:1em; background-color:#ff0; transform:scale(0.4) translate(0em,0em); } .a06034_pause { position:absolute; width:1em; height:1em; background-color:#0af; border-radius:100em; transform:scale(1.3) translate(0.15em,0.15em); } .a06034_pause:before { content:""; position:absolute; width:0.3em; height:1em; border-width:0em 0.3em 0em 0.3em; border-style:solid; border-color:transparent #ff0 transparent #ff0; transform:scale(0.4) translate(0.12em,0em); } </style> <div class="a06034_bk"> <div class="a06034_o" style="font-size:3em;border:0.2em solid #0f0"></div> </div> <div class="a06034_bk"> <div class="a06034_x" style="font-size:3em;"></div> </div> <div class="a06034_bk"> <div class="a06034_plus" style="font-size:3em;"></div> </div> <div class="a06034_bk"> <div class="a06034_ok" style="font-size:3em;"></div> </div> <div class="a06034_bk"> <div class="a06034_play" style="font-size:3em;"></div> </div> <div class="a06034_bk"> <div class="a06034_stop" style="font-size:3em;"></div> </div> <div class="a06034_bk"> <div class="a06034_pause" style="font-size:3em;"></div> </div> </div>