Skip to main content
revisão de conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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

exemplo visual de elemento com border-radius invertido

Mas pela documentação parece que o border-radius não aceita valores negativos

.container {
    width: 400px;300px;
    height: 200px;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 no backgrounddo background da página?

OBS: Não posso usar SVG ou Clip-Path

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

exemplo visual de elemento com border-radius invertido

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

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

exemplo visual de elemento com border-radius invertido

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

Tweeted twitter.com/StackOverflowPT/status/1025169694247010304

Como fazer um Border-Radius Invertido com CSS?

descrição na imagem e revisão da formatação
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Como fazer um Border-Radius Invertido com CSS?

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

inserir a descrição da imagem aquiexemplo visual de elemento com border-radius invertido

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?? 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

OBS: Não posso usar SVG ou Clip-Path

Como fazer um Border-Radius Invertido com CSS

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

inserir a descrição da imagem aqui

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

Como fazer um Border-Radius Invertido com CSS?

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

exemplo visual de elemento com border-radius invertido

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

inclui novas informações
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166
Carregando