¿Es posible un radio de borde cóncavo?

Nuestros desarrolladores estrellas han agotado sus reservas de café, buscando a tiempo completo por la respuesta, hasta que Marco halló la solución en GitLab así que ahora la comparte aquí.

Solución:

Con un uso inteligente de la :before y :after pseudo clases, podemos simular una forma cóncava:

    #test
        width: 100px;
        height: 300px;
        background: green;
        position: relative;
        display: inline-block;
    
    
    #test:before
        background: white;
        height: 300px;
        width: 30px;
        border-radius: 0 60px 60px 0 / 0 300px 300px 0;
        display: inline-block;
        content: '';
    
    
    #test:after
        background: white;
        height: 300px;
        width: 30px;
        border-radius: 60px 0 0 60px / 300px 0 0  300px;
        display: inline-block;
        content: '';
        position: relative;
        left: 40px;
    

Él #test div es un rectángulo simple. Pero es :before y :after los elementos son cóncavos de medio lado rellenos con el color de fondo (blanco en este caso).

Ver este jsfiddle.

Puede dar la impresión de un borde cóncavo usando degradados radiales en el fondo. Por ejemplo, algo como esto:

#test 
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;

Tenga en cuenta que la mayoría de los navegadores webkit aún requieren prefijos para degradados radiales, y si desea admitir completamente navegadores más antiguos, es posible que también deba implementar la sintaxis de degradado anterior.

SVG es la forma recomendada de crear tales formas. Ofrece simplicidad y escalabilidad.

Nosotros podemos usar SVGelemento de ruta para crear una forma como la de arriba y rellenarla con un color sólido, un degradado o un patrón.

Solo uno attribute d se utiliza para definir formas en path elemento. Este attribute en sí mismo contiene una serie de comandos cortos y pocos parámetros que son necesarios para que esos comandos funcionen.

El siguiente código creará una forma convexa:

Y el siguiente creará una forma cóncava:

A continuación se muestra una breve descripción de path comandos utilizados en el código anterior:

• M El comando se utiliza para definir el punto de partida. Aparece al principio y especifica el punto desde donde debe comenzar el dibujo.
• L El comando se utiliza para dibujar líneas rectas.
• Q El comando se utiliza para dibujar curvas.

Imagen de salida:

Demostración de trabajo:

Recursos útiles:

A continuación hay algunos enlaces útiles para SVG:

• Especificación
• MDN

Finalizando este artículo puedes encontrar las aclaraciones de otros programadores, tú asimismo eres capaz dejar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador