看代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background:#ccc; } .example{ margin:100px auto; width:0; height:0; border-top:10px solid blue; border-bottom:10px solid red; border-left:10px solid yellow; border-right:10px solid black; } .up{ width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid red; border-left:10px solid transparent; border-right:10px solid transparent; } </style> </head> <body> <div class="example"> </div> <div class="up"> </div> </body> </html>
显示效果如图：
箭头向上时，将左、右、上的箭头颜色改为透明即可；
箭头向下时，将左、右、下的箭头颜色改为透明即可；
箭头向左时，将上、下、右的箭头颜色改为透明即可；
箭头向右时，将上、下、左的箭头颜色改为透明即可；
显示效果如图：
