Creating Triangles in CSS
http://jonrohan.me/guide/css/creating-triangles-in-css/
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style> .wrap { width: 100px; background: #F00; } .box { margin-bottom: 10px; margin-right: auto; margin-left: auto; } .box-1 { border-width: 6px; border-style: solid; border-color: #FF0; } .box-2 { border-width: 6px; border-style: solid dashed; border-color: #FF0 transparent; } .box-3 { border-width: 6px 6px 0; border-style: solid dashed; border-color: #FF0 transparent; } .box-4 { width: 0; height: 0; overflow: hidden; border-width: 6px 6px 0; border-style: solid dashed; border-color: #FF0 transparent; } </style> </head> <body> <div class="wrap"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> <div class="box box-4"></div> </div> </body> </html>