三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3三角形画法</title> <style> .content{ width: 0px; height: 0px; margin: 50px auto 0px; border-width: 150px; border-color: #666 #CC0066 #CC9966 #FFCC33; border-style: solid; } </style> </head> <body> <div class="content"></div> </body> </html>
原来border每个边,形成了三角形。 之前一直很奇怪,为什么每次width 和 height 都是0px? 我想原因已经不言而喻。 当然我们应该试一下看看 ~
可以给加上padding:50px;中间的白色区域就是100px