CSS Skew Element e Achieve Inner Rounded Border Top

Em web design, pode ser um desafio replicar elementos gráficos complexos com precisão e capacidade de resposta usando CSS. Um desses desafios é criar um elemento distorcido com uma borda interna arredondada na parte superior.

Definindo a estrutura HTML

Primeiro, vamos definir a estrutura HTML:

Implementando o CSS

Para inclinar o elemento e adicionar a borda interna arredondada no topo, usaremos o seguinte 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 cria um elemento distorcido que serve como base para a borda interna arredondada superior. O pseudoelemento :before preenche a área azul com um canto arredondado, enquanto o pseudoelemento :after adiciona o efeito de gradiente radial para criar a borda interna.

Combinando inclinação e borda interna

Combinando o elemento distorcido e a borda interna, alcançamos o efeito desejado:

.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 criar um elemento responsivo com uma forma distorcida e uma borda interna arredondada sem a necessidade de vários elementos. Esta abordagem oferece maior flexibilidade e facilidade de implementação.