0
366
Vistas¿Cómo mostrar solo la mitad superior de un conjunto de elementos circulares?
He creado 4 círculos. Uno es el círculo principal (color de fondo) y 3 círculos internos (he configurado el borde blanco para cada uno).
Tengo que crear un círculo como el de la imagen de abajo en mi página y probé el siguiente código pero estoy completando el círculo. ¿Necesito saber cómo mostrar solo medio círculo en la página?
¿Es esta la mejor manera de mostrar el círculo en la página?
.circle-big { width: 800px; height: 800px; background: linear-gradient(180deg, rgba(255, 176, 0, 0) 0%, rgba(255, 176, 0, 0.32) 100%); border-radius: 50%; position: relative; } .circle-big div:nth-child(1) { width: 600px; height: 600px; } .circle-big div:nth-child(2) { width: 400px; height: 400px; } .circle-big div:nth-child(3) { width: 200px; height: 200px; } .circle-big>div { border: 20px solid #fff; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } <div class="circle-big"> <div></div> <div></div> <div></div> </div>3 Respuestas
Responde la pregunta0
La "solución" más fácil usando su código sería envolver los círculos dentro de un contenedor. Luego aplique la mitad de la altura al contenedor y agregue: overflow-y: hidden .
En mi humilde opinión, el mejor enfoque para diseñar algo como esto sería el uso de un SVG.
.container { width: 800px; height: 400px; overflow-y: hidden; } /* original CSS */ .circle-big { width: 800px; height: 800px; background: linear-gradient(180deg, rgba(255, 176, 0, 0) 0%, rgba(255, 176, 0, 0.32) 100%); border-radius: 50%; position: relative; } .circle-big div:nth-child(1) { width: 600px; height: 600px; } .circle-big div:nth-child(2) { width: 400px; height: 400px; } .circle-big div:nth-child(3) { width: 200px; height: 200px; } .circle-big>div { border: 20px solid #fff; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } <div class="container"> <div class="circle-big"> <div></div> <div></div> <div></div> </div> </div>0
Aquí hay una idea usando un elemento y unas pocas líneas de código. Simplemente ajuste el ancho para controlar el tamaño y el color principal se especifica solo una vez y la máscara creará el efecto de desvanecimiento. La brecha es el 10px .
.box { width: 400px; aspect-ratio: 2; border-radius: 999px 999px 0 0; background: repeating-radial-gradient(at bottom, #f7e4ba 0 calc(18% - 10px), #0000 0 18%); -webkit-mask: linear-gradient(#0000,#000); } <div class="box"></div>0
Me gusta evitar los tamaños de codificación dura siempre que sea posible. Mediante el uso de un elemento contenedor con desbordamiento oculto, junto con un margen superior negativo, podemos cortar los círculos por la mitad, independientemente de su tamaño.
Dimensiones reducidas para una mejor demostración.
.overflow-hidden { overflow: hidden; } .inline-block { display: inline-block; } .circle-big { width: 200px; height: 200px; background: linear-gradient(180deg, rgba(255, 176, 0, 0) 0%, rgba(255, 176, 0, 0.32) 100%); border-radius: 50%; position: relative; margin-bottom: -50%; /* <---- here's your huckleberry */ } .circle-big div:nth-child(1) { width: 150px; height: 150px; } .circle-big div:nth-child(2) { width: 100px; height: 100px; } .circle-big div:nth-child(3) { width: 50px; height: 50px; } .circle-big>div { border: 5px solid #fff; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } <p>Unaffected content above.</p> <div class="overflow-hidden inline-block"> <div class="circle-big"> <div></div> <div></div> <div></div> </div> </div> <p>Unaffected content below.</p>