首页用HTML画一个好看的玫瑰花

用HTML画一个好看的玫瑰花

时间: 2023-10-25 10:09:08 浏览: 100

你可以使用HTML中的图形元素和CSS样式来画一朵玫瑰花。下面是一个简单的HTML代码示例： ``` <!DOCTYPE html> <html> <head> <style> .petal { width: 100px; height: 50px; background-color: red; transform: rotate(30deg); border-radius: 0 0 50% 50%; position: absolute; } </style> </head> <body> <div class="petal" style="top: 20px; left: 50px;"></div> <div class="petal" style="top: 40px; left: 30px; transform: rotate(60deg);"></div> <div class="petal" style="top: 60px; left: 50px; transform: rotate(120deg);"></div> <div class="petal" style="top: 40px; left: 70px; transform: rotate(180deg);"></div> <div class="petal" style="top: 20px; left: 90px; transform: rotate(240deg);"></div> <div class="petal" style="top: 0px; left: 70px; transform: rotate(300deg);"></div> </body> </html> ``` 这个示例中，我们使用了几个相同的div元素，它们的样式使用了CSS中的`class`和`style`属性。我们使用了`background-color`属性来设置颜色，使用了`transform`属性来旋转每片花瓣，并使用了`border-radius`属性来创建弧形边界。你可以根据需要调整这些代码以获得更好的效果。

阅读全文