这是2014百度秋招的笔试题，关键在于如何用css实现出那个小三角形，在说实现方法之前让我们先来看一小段代码理解一下border属性吧。
</style> #demo1{ width: 0; height: 0; border-top: 50px solid #f69; border-left: 50px solid #000; border-bottom: 50px solid red; border-right: 50px solid yellow; } </style> <body> <div id="demo1"></div> </body>
这是在浏览器打开后的效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset=utf-8> <title>demo</title> </head> <style> #demo{ width:100px; height:100px; border:2px solid #000; } #demo:before{ content:‘‘; display:block; width:0; height:0; position:relative; top:10px; left:100px; border-left:9px solid #000; border-top:7px solid transparent; border-bottom:7px solid transparent; } #demo:after{ content:‘‘; display:block; width:0; height:0; position:relative; top:-2px; left:100px; border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; } #demo1{ margin: 100px auto; width: 0; height: 0; border-top: 50px solid transparent; border-left: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid yellow; } </style> <body> <div id=‘demo‘></div> <div id="demo1"></div> <script> </script> </body> </html>
这是效果图
好的，这就结束了。
原文：http://www.cnblogs.com/tianheila/p/4884366.html