demo
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>demo</title> </head> <style> #demo{ width:100px; height:100px; border:2px solid #000; } #demo:before{ content:''; display:block; width:0; height:0; position:relative; top:10px; left:100px; border-left:9px solid #000; border-top:7px solid transparent; border-bottom:7px solid transparent; } #demo:after{ content:''; display:block; width:0; height:0; position:relative; top:-2px; left:100px; border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; } #s{ width:0; height:0; border-left:20px solid transparent; /*→*/ border-right:20px solid transparent; /*←*/ border-top:20px solid transparent; /*↓*/ border-bottom:20px solid green; /*↑*/ } </style> <body> <div id='demo'></div> <div id="s"></div> </body> </html>