<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*上箭头*/ .triangle-up { width:0; height:0; border:10px solid transparent; border-bottom-color:yellow; } /*下箭头*/ .triangle-down { width:0; height:0; /*transform: translate(-50%,-50%);*/ border:10px solid transparent; border-top-color:yellow; } /*左箭头*/ .triangle-left { width:0; height:0; border:10px solid transparent; border-right-color:yellow; } /*右箭头*/ .triangle-right { width:0; height:0; /*transform: translate(-50%,0);*/ border:10px solid transparent; border-left-color:yellow; } </style> </head> <body> <div class="triangle-right"></div> </body> </html>
原文：http://www.cnblogs.com/joesbell/p/5938730.html