<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #triangle-up { width: 0; height: 0; border-left: 50px solid red; border-right: 50px solid yellow; border-bottom: 50px solid greenyellow; border-top: 50px solid #0F9AE0; /*加 transparent 属性可以使相应的边框隐藏*/ } </style> </head> <body> <div id="triangle-up"></div> </body> </html>
效果图如下：
原文：http://www.cnblogs.com/zouqin/p/5437834.html