Sesgar elemento CSS y lograr borde superior interior redondeado

En diseño web, puede resultar complicado replicar elementos gráficos complejos con precisión y capacidad de respuesta usando CSS. Uno de esos desafíos es crear un elemento sesgado con un borde superior interior redondeado.

Definición de la estructura HTML

Primero, definamos la estructura HTML:

Implementando el CSS

Para sesgar el elemento y agregar el borde superior redondeado interior, usaremos el siguiente CSS:

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before,
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
}

.header:before {
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}

.header:after {
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

Este CSS crea un elemento sesgado que sirve como base para el borde superior redondeado interior. El pseudoelemento :before rellena el área azul con una esquina redondeada, mientras que el pseudoelemento :after agrega el efecto de degradado radial para crear el borde interior.

Combinando sesgo y borde interior

Al combinar el elemento sesgado y el borde interior, logramos el efecto deseado:

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

Este método nos permite crear un elemento responsivo con una forma sesgada y un borde superior interior redondeado sin la necesidad de múltiples elementos. Este enfoque ofrece mayor flexibilidad y facilidad de implementación.