听说是百度校招的题目，就写了一下
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style> *{ margin:0; padding:0; } .tri_parent{ position:relative; 200px; height:200px; margin:40px; padding:10px; background:#09C; } .tri_parent .tri_content{ 100%; height:100%; background:#FFF; } .tri_parent .tri{ position:absolute; top:0; right:-8px; color:#09C; } </style> <body> <div class="tri_parent"> <div class="tri_content"> 使用字符串实现三角形 </div> <div class="tri">◆</div> </div> <style> .tri_parent_css{ margin:40px; position:relative; 200px; height:200px; padding:10px; background:#09C; } .tri_parent_css .tri{ position:absolute; 0; height:0; right:-20px; top:10px; border:10px solid transparent; border-left:10px solid #09C; } </style> <div class="tri_parent_css"> 使用CSS实现三角形
注意的是三角形的right是三角形的border的width度 <div class="tri"> </div> </div> </body> </html>