<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>彩虹</title> <style> .rainbow-wrap { width: 500px; height: 500px; background-color: red; position: relative; left: 20px; top: 20px; border-radius: 100%; } .rainbow-wrap::after { content: ''; width: 500px; height: 250px; background-color: white; position: absolute; bottom: 0; } .rainbow-wrap::before { content: ''; width: 200px; height: 200px; background-color: white; position: absolute; bottom: 0; border-radius: 100%; top: 150px; z-index: 10; left: 150px; } .rainbow-wrap .rainbow-item { position: absolute; width: 400px; height: 400px; border-radius: 100%; background-color: yellow; top: 50%; left: 50%; transform: translate(-50%, -50%); } .rainbow-item:nth-child(2) { background-color: blue; width: 300px; height: 300px; } .rainbow-item:nth-child(3) { background-color: green; width: 200px; height: 200px; } </style></head><body><div class="rainbow-wrap"> <div class="rainbow-item"></div> <div class="rainbow-item"></div> <div class="rainbow-item"></div></div></body></html>
