He estado intentando hacer un DIV con lados redondeados desiguales como este:
Revisé algunas soluciones y lo más cerca que puedo llegar es usando border-radius. He usado:
border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px;
Y esto es lo que tengo:
¿Cómo se puede hacer esto?
Puedes considerarclip-path
Mostrar fragmento de código
.box {
height: 200px;
width: 200px;
background: blue;
clip-path: circle(75% at 65% 10%);
}
<div class="box">
</div>
O usarradial-gradient
Mostrar fragmento de código
.box {
height: 200px;
width: 200px;
background: radial-gradient(circle at 65% 10%, blue 75%,#0000 75.5%);
}
<div class="box">
</div>
O use un pseudo elemento border-radiusy confíe en el desbordamiento
Mostrar fragmento de código
.box {
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
inset: 0 -10% 10%;
background: blue;
border-radius: 0 0 50% 100%;
}
<div class="box">
</div>
Y no olvidemos la solución SVG (como elemento o fondo normal)
Mostrar fragmento de código
svg {
display:inline-block;
}
.box {
display:inline-block;
height:200px;
width:200px;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='200' height='200' fill='blue'> <path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' /></svg>")0 0/100% 100% no-repeat;
}
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 64 64'
width='200' height='200'
fill='blue'>
<path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' />
</svg>
<div class="box">
</div>
Aquí hay una buena herramienta en línea para ajustar fácilmente el SVG http://jxnblk.com/paths/?d=M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z
También puedes considerar mask-image:
Mostrar fragmento de código
.box {
height: 200px;
width: 200px;
background:blue;
-webkit-mask-image: radial-gradient(circle at 65% 10%, #fff 75%,#0000 75.5%);
mask-image: radial-gradient(circle at 65% 10%, #fff 75%,#0000 75.5%);
}
<div class="box">
</div>
Aquí hay otra sintaxis para la solución sin cuyo radial-gradientuso no se admite en Safari.at
Mostrar fragmento de código
.box {
height: 200px;
width: 200px;
background:
radial-gradient(blue 60.5%,#0000 61%) 35% 100%/200% 200% no-repeat;
}
<div class="box">
</div>
