Me pidieron que creara un diseño similar a un semicírculo para mi proyecto en html css, se ve así:
Figma Design pero realmente se "amplió".
Traté de hacerlo y lo más cerca que pude lucir así: Mi más cercano
con este código:
.semi-circle { transform: translate(0, 0); height: 150px; width: 100%; border-radius: 0 0 150px 150px; /* border-radius: 0 0 150px 150px; */ background-color: #0E47A1; } <div class="semi-circle"></div>¿Qué puedo modificar y cómo hacerlo como el diseñado?
He usado ::after de crear el efecto, puede cambiar la height para obtener la curva deseada.
.curve{ position: relative; width: 300px; height: 200px; margin: auto; overflow: hidden; } .curve::after{ content: ""; position: absolute; top: 0px; left: 50%; border-radius:50%; background: blue; width:500px; height:300px; transform: translate(-50%, -50%); } <div class="curve"></div>Esto se parece al ejemplo. Es receptivo y encajará así en cualquier pantalla.
.semi-circle { transform: translate(0, 0); height: 150%; width: 150%; border-radius: 50%; /* border-radius: 0 0 150px 150px; */ background-color: #0E47A1; position: absolute; top: -90%; left: -22.5%; } body { overflow: hidden; } <div class="semi-circle"></div>Aquí hay una idea para ti. puede configurarlo para que se transforme y luego rotarlo al mismo tiempo, coloque un div falso en la parte superior para que pueda cubrir todo el azul restante. Hágamelo saber.
body {background-color:lightgrey;} .semi-circle { height: 200px; width: 200px; border-radius : 50%; background-color: #0E47A1; margin-top:0px; transform: scale(1.5) rotateX(105deg); overflow:hidden; align-items:center; margin-left:50px; } .box { width: 300px; height: 800px; border:1px solid gray; background-color:white; } .blue { background-color:#0E47A1; height:100px; } .whitebox { width:220px; height:40px; line-height:1; margin:0 auto; box-shadow: 2px 2px 4px 2px gray; text-align:center; padding:10px; border-radius:20px; position:absolute; top:120px; left:40px; background-color:white; } <body> <div>Home</div> <div class="box"> <div class="blue"> <div class="semi-circle"></div> <div class="whitebox">Hello Visitors! <span>this is the hidden text......</span> </div> </div> </div> </body>