<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .arrow { width:0; height:0; position: absolute; top:0; left:0; display: inline-block; } .arrow-down { border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #f63; } .arrow-up { border-bottom:5px solid #f63; border-left:5px solid transparent; border-right:5px solid transparent; top:50px; } .arrow-left { border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:5px solid #f63; top:100px; } .arrow-right { border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #288; top:150px; } </style> </head> <body> <div style="position: relative"> <span class="arrow arrow-down"></span> <span class="arrow arrow-up"></span> <span class="arrow arrow-left"></span> <span class="arrow arrow-right"></span> </div> </body> </html>
转载于:https://www.cnblogs.com/wuheng1991/p/5102021.html