0
348
Views¿Cómo agrego un radio negativo a la mitad del círculo?
Quiero hacer esto:
Hasta ahora tengo esto:
.header { position: fixed; top: 0; left: 0; width: 100%; background: #red; z-index: 10000; height: 10px; overflow: visible; } .header:after { content: ''; position: relative; top: 100%; display: block; margin: 0 auto; background: red; width: 50px; height: 25px; border-radius: 10px 10px 50px 50px; } <div class="header"></div>Codepen .
No puedo hacer que el radio superior vaya hacia afuera del semicírculo como en la imagen.
¿Cómo hacer esto con CSS?
·
Santiago Trujillo
1 answers
Answer question0
No puede hacer un radio negativo en un borde.
Existe la posibilidad de hacer una ruta SVG o un degradado radial ... Hice un nuevo div como círculo y degradado radial en pseudoelementos. No es perfecto, pero posiblemente le muestre la dirección a la solución :)
.header { position: fixed; top: 0; left: 0; width: 100%; background: red; z-index: 10000; height: 10px; overflow: visible; } .header-circ { position: relative; top: 100%; display: block; margin: 0 auto; background: red; width: 500px; height: 250px; border-radius: 10px 10px 250px 250px; } .header-circ::before, .header-circ::after { content: ""; position: absolute; width: 100px; height: 100px; z-index: -1; } .header-circ::before { left:-94px; background: radial-gradient(circle at bottom left, white 0%,white 75%,red 75%); } .header-circ::after { right:-94px; background: radial-gradient(circle at bottom right, white 0%,white 75%,red 75%); } <div class="header"></div> <div class="header-circ"></div>
·
Santiago Trujillo
Report
Answer question