首页生成圣诞树html代码

生成圣诞树html代码

时间: 2023-12-26 08:28:10 浏览: 87

以下是使用HTML和CSS生成圣诞树的代码示例： ```html <!DOCTYPE html> <html> <head> <style> .tree { position: relative; width: 0; height: 0; margin: 0 auto; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 300px solid green; } .tree::before { content: ""; position: absolute; top: -150px; left: -50px; width: 0; height: 0; border-left: 250px solid transparent; border-right: 250px solid transparent; border-bottom: 150px solid green; } .star { position: absolute; top: -200px; left: 175px; width: 50px; height: 50px; background: yellow; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } </style> </head> <body> <div class="tree"></div> <div class="star"></div> </body> </html> ``` 这段代码使用CSS的border属性和伪元素before来绘制圣诞树的形状。通过调整border的宽度和高度，可以控制圣诞树的大小。同时，使用clip-path属性来绘制星星的形状，并通过调整top和left属性来定位星星的位置。

阅读全文