How to make an Inverted Border-Radius?

Question

How to make an Inverted Border-Radius?

Navigation

#1 by (7 votes)
#2 by (6 votes)
#3 by (4 votes)

4

I was testing border-radius and I got a debt ... Is there any way to with CSS invert the radius of curvature of border-radius ?

This is the shape shape I would like to get

Butfromthedocumentationitseemsthatborder-radiusdoesnotacceptnegativevalues

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

Then there was the question, how to get this form with CSS only and continue to see the background image in the background?

I can not use SVG or Clip-Path

html html5 css css3

asked by anonymous 02.08.2018 / 19:27

3 answers

6

Dude, my humble suggestion would be to use a radial-gradient .

In this case, in every corner of a div daughter, you would use a radial-gradient with the same color that you use in the parent container.

So:

*{
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>

Of course, when you add text within div that loads radial-gradient , the text will stay on top of the "ball" at the top. The solution I got was to set padding to div.internal-radius to the same value as radial-gradient , ie 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>

Note : For the joy of gurizada: it works in Internet Explorer 10.

Honestly, it's not one of the best solutions, but CSS is still like this.

02.08.2018 / 20:37

4

The solution I came up with was similar to Mr. Wallace, however I used 4 divs inside a container to have transparency in the corners.

Face one of the 4 divs has a radial gradient with the center of the circle aligned in the corner going from transparent to the background color.

To better understand the example based in this article .

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>

02.08.2018 / 20:44

Traversing objects with pure JavaScript How to check for value in an array in PHP?

score 7 · Accepted Answer

Following the similar idea of Wallace, I found this link from Lea Verou :

link

The difference is that with this it is possible to apply transparency and thus can change the background color easily.

In the example it has an inverted rounded edge and also diagonal cut (chamfer) corners.

Note that in the example both within% with% and with% with% with% with%, to change the element color change these linear-gradient , and should be done the same in:
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>