8

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

10
  • 1
    Tem que ser com <div>? Isso aí pode ser facilmente resolvido com svg. Commented 2/08/2018 às 17:30
  • 1
    @Renan com SVG ou até Clip-Phat fica fácil mesmo, queria com CSS apenas.
    – hugocsl
    Commented 2/08/2018 às 17:31
  • 1
    De uma olhada nesse link: codepen.io/sergejmueller/pen/fJEml Commented 2/08/2018 às 17:34
  • 1
    @PedroPaulo legal o exemplo, mas se vc colocar lá um background: red; no body vc vai ver o que acontece... não vai servir pra mim
    – hugocsl
    Commented 2/08/2018 às 17:40
  • 2
    Tem uma pergunta no SO que deve adjudar: stackoverflow.com/a/22422105/4730201 Commented 2/08/2018 às 17:46

4 Respostas 4

12

Seguindo a ideia semelhante a do Wallace, encontrei este link da Lea Verou:

A diferença é que com isto é possível aplicar a transparência e assim pode mudar a cor de fundo facilmente.

No exemplo tem borda arredonda invertida e também cantos em corte diagonal (chanfro).

Note que no exemplo tanto dentro de linear-gradient quano dentro de radial-gradient tem #fff, para trocar a cor do elemento troque estes #fff, e deve ser feito o mesmo em:

background: #fff; /* fallback */

/**
 * Beveled corners & negative border-radius with CSS gradients
 */

.bevel {    
	background: #fff; /* fallback */
	background:
		linear-gradient(135deg, transparent 10px, #fff 0) top left,
		linear-gradient(225deg, transparent 10px, #fff 0) top right,
		linear-gradient(315deg, transparent 10px, #fff 0) bottom right,
		linear-gradient(45deg,  transparent 10px, #fff 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}

.bevel.round {
	background-image:
		radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #fff 15px),
		radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #fff  15px),
		radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #fff 15px),
		radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #fff 15px);
}

/* esta parte a seguir é somente para testes */
html, body {
	height: 100%;
}

body {
    background: red;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    animation: cores-animadas 5s infinite;
}

.exemplo {
    width: 200px;
    margin: 15px auto;
    padding:13px 15px;
    color: #0c0c0c;
    line-height:1.5;
}

@keyframes cores-animadas
{
    0%   { background-color: red; }
    20%  { background-color: green; }
    40%  { background-color: blue; }
    60%  { background-color: violet; }
    80%  { background-color: orange; }
    100% { background-color: red; }
}
<div class="exemplo bevel">
   foo bar baz<br>foo bar baz<br>foo bar baz
</div>

<div class="exemplo bevel round">
   foo bar baz<br>foo bar baz<br>foo bar baz
</div>

1
  • 2
    Ótimo resultado, e a explicação adicional ajudou bastante!
    – hugocsl
    Commented 2/08/2018 às 19:30
9

Cara, minha humilde sugestão seria usar um radial-gradient.

No caso, em cada canto de uma div filha, você usaria um radial-gradient com a mesma cor que você usa no contêiner pai.

Assim:

*{
box-sizing: border-box;
}

.internal-radius{
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
  <div class="internal-radius"></div>
</div>

É claro que, ao adicionar um texto dentro da div que carrega o radial-gradient, o texto vai ficar em cima da "bolinha" do topo. A solução que arrumei foi colocar padding na div.internal-radius com o mesmo valor de radial-gradient, ou seja, 20px.

*{
box-sizing: border-box;
}

.internal-radius{
    padding: 20px;
    background-color: #fff;
    width: 300px;
    height: 200px;
    background-image: radial-gradient(circle at left top, lightblue 20px, transparent 0), 
    radial-gradient(circle at left bottom, lightblue 20px, transparent 0),
    radial-gradient(circle at right top, lightblue 20px, transparent 0),
    radial-gradient(circle at right bottom, lightblue 20px, transparent 0);
    width: 100%;
}

.container{
   background-color: lightblue;
   padding: 15px;
   
}
<div class="container">
    <div class="internal-radius">
      Meu nome é Wallace e eu sou bonito
    </div>
</div>

Observação: Pra alegria da gurizada: funciona no Internet Explorer 10.

Honestamente, não é uma das melhores soluções, mas CSS ainda é assim.

7

A solução que cheguei foi similar a do sr. Wallace, porém utilizei 4 divs dentro de um container para ter a transparência nos cantos.

Cara uma das 4 divs tem um radial gradiente com o centro do circulo alinhado no canto indo do transparente para a cor do background.

Para entender melhor segue o exemplo baseado nesse artigo.

html {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, red, blue);
    background-repeat: no-repeat;
}
.container {
    position: relative;
    width: 400px;
    height: 200px;
    margin: 3rem auto;
}

.tl, .tr, .br, .bl {
    width: 200px;
    height: 100px;
    /* background-color: #fff; */
    float: left;
}
.tl {
    background-image: radial-gradient(circle at 0 0,transparent 20px, green 20px);
}
.tr {
    background-image: radial-gradient(circle at 100% 0,transparent 20px, green 20px);
}
.bl {
    background-image: radial-gradient(circle at 0 100%,transparent 20px, green 20px);
}
.br {
    background-image: radial-gradient(circle at 100% 100%,transparent 20px, green 20px);
}
.container p {
    position: absolute;
    text-align: center;
    padding: 20px
}
<div class="container">
    <div class="tl"></div>
    <div class="tr"></div>
    <div class="bl"></div>
    <div class="br"></div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi, dolores.</p>
</div>

-6

Resolve, Border corner shape the css box { background-color: #3498DB; border-corner-shape: scoop; border-radius: 30px; width: 200px; height: 200px; }

1
  • 1
    Isso não funciona em nenhum browser, e nem pode-se afirmar que algum dia isso vai ser aprovado pela W3C, essa resposta no momento só serve para confundir os usuários. Tente testar as coisas localmente antes de postar como resposta, é só uma dica... Commented 24/02/2020 às 14:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .