Css画圣诞树
今天看到一道有趣的css题，要求用html和css实现一个圣诞树（上面一个小三角，下面一个大三角，最下面是一个矩形）？
你看到后脑子中的印象是什么呢，三角形的做法，还是什么，接下来看看我的制作过程。
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ width: 500px; height: 500px; border: 5px #000 solid; margin: 0 auto; text-align: center; } h1{ color: #33ff33; margin-top: 10px; } h2{ width: 0; height:0; border-top:60px #fff solid; border-right:70px #fff solid; border-bottom:70px #3333ff solid; border-left:70px #fff solid; position:relative; left:180px; } h3{ width: 0; height:0; border-top:100px #fff solid; border-right:100px #fff solid; border-bottom:100px #3333ff solid; border-left:100px #fff solid; margin-left: 150px; margin-top: -100px; } p{ width: 10px; height:180px; margin:0 auto; background: red; clear: both; /*不加清除浮动就会在h3下边显示*/ } </style> </head> <body> <div id="div1"> <h1>圣诞树制作</h1> <h2></h2> <h3></h3> <p></p> </div> </body> </html> |
效果如下：
