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: 400px;
height: 200px;
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 só com CSS e continuar visualizando a imagem de fundo no background??
OBS: Não posso usar SVG ou Clip-Path