<!doctype html> <html> <head> <meta charset="utf-8"> <title>字符制作三角边框</title> <style> *{margin:0;padding:0;} /* 方式一 margin */ .test{font-family:SimSun; width:300px; margin:0 auto; border:1px solid #F00; margin-top:20px; height:100px;} .test em,.test span{ font-style:normal; display:block; width:30px; height:16px;font-size:30px; overflow:hidden;_position:relative; margin-left:10px;} .test em{ margin-top:-16px; color:#F00;} .test span{margin-top:-14px; color:#fff;} /* 方式二 定位 */ .box{font-family:SimSun; width:300px; border:1px solid #F00; margin:50px auto; height:100px; position:relative;} .box em,.box span{font-style:normal;font-size:30px; position:absolute; left:-16px; top:40px; color:#F00;} .box span{left:-14px; color:#fff; } </style> </head> <body> <div class="test"> <em>◆</em> <span>◆</span> </div> <div class="box"> <em>◆</em> <span>◆</span> </div> </body> </html>