首页白色圣诞树代码html

白色圣诞树代码html

时间: 2023-12-25 09:05:42 浏览: 68

以下是一个简单的白色圣诞树的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>White Christmas Tree</title> <style> body { background-color: #000; } .tree { position: relative; width: 0; height: 0; margin: 100px auto; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 400px solid #fff; } .tree::before { content: ""; position: absolute; top: -200px; width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 300px solid #fff; } .tree::after { content: ""; position: absolute; top: -100px; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid #fff; } </style> </head> <body> <div class="tree"></div> </body> </html> ``` 这段代码使用CSS的border属性来绘制圣诞树的形状，通过设置不同的border宽度和颜色来实现白色的效果。你可以将这段代码保存为一个HTML文件，然后在浏览器中打开，就可以看到一个白色的圣诞树了。

阅读全文