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.