<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{margin:0;padding: 0;} div{margin:10px;} .b0{height:100px; width:100px; border-top:solid 50px red; border-left:solid 50px yellow; border-right:solid 50px green; border-bottom:solid 50px blue; } .b1{height:0px; width:0px; border-top:solid 50px red; border-left:solid 50px yellow; border-right:solid 50px green; border-bottom:solid 50px blue; } .b2{height:0px; width:0px; border-top:solid 50px red; border-right:solid 50px green; } .b3{height:0px; width:0px; border-top:solid 50px red; border-right:solid 50px rgba(0,0,0,0); } .b4{height:0px; width:0px; border-top:solid 30px red; border-right:solid 40px rgba(0,0,0,0); } .b5{height:0px; width:0px; border-top:solid 50px red; border-left:solid 50px rgba(0,0,0,0); border-right:solid 50px rgba(0,0,0,0); } </style> </head> <body> <div class="b0"></div> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div class="b4"></div> <div class="b5"></div> </body> </html>
原文：http://www.cnblogs.com/crystalmoore/p/5045722.html