Untitled
unknown
plain_text
3 months ago
1.4 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Flower</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f8f8f8; } .flower { position: relative; width: 100px; height: 100px; } .petal { position: absolute; width: 50px; height: 50px; background-color: pink; border-radius: 50%; } .petal:nth-child(1) { top: 0; left: 25px; } .petal:nth-child(2) { bottom: 0; left: 25px; } .petal:nth-child(3) { left: 0; top: 25px; } .petal:nth-child(4) { right: 0; top: 25px; } .center { position: absolute; top: 25px; left: 25px; width: 50px; height: 50px; background-color: yellow; border-radius: 50%; } </style> </head> <body> <div class="flower"> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="petal"></div> <div class="center"></div> </div> </body> </html>
Editor is loading...
Leave a Comment