Estava testando o border-radius
e me surgiu uma dívida... Existe alguma forma de com CSS inverter o raio de curvatura do border-radius
?
Esse é o formato do shape que eu gostaria de obter
Mas pela documentação parece que o border-radius
não aceita valores negativos
.container {
width: 300px;
height: 160px;
background-color: red;
border-radius: -20px; /* não aceita valor negativo */
}
html {
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, green, blue);
background-repeat: no-repeat;
}
<div class="container"></div>
Então ficou a dúvida, como conseguir essa forma nos cantos só com CSS e continuar visualizando a imagem ou a cor de fundo do background
da página?
OBS: Não posso usar SVG ou Clip-Path
<div>
? Isso aí pode ser facilmente resolvido comsvg
.