Here is a simple example of how we can create reverse cornered shapes in the white color shown in the image above. Please have a look at the demo below and also check its HTML and CSS. You can also edit it in Codepen and experiment with it.
Demo
See the Pen Css shape: reverse curved corner by Puneet Sharma (@webdevpuneet) on CodePen.
HTML
<div id="curved-corner-bottomleft"></div>
<div id="curved-corner-bottomright"></div>
<div id="curved-corner-topleft"></div>
<div id="curved-corner-topright"></div>
CSS
body{
background:#000;
}
#curved-corner-bottomright:before {
content: "";
display: block;
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
bottom: 0;
right: 0;
box-shadow: 100px 100px 0 0 #ffffff;
}
#curved-corner-topright:before {
content: "";
display: block;
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
top: 0;
right: 0;
box-shadow: 100px -100px 0 0 #ffffff;
}
#curved-corner-topleft:before {
content: "";
display: block;
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
box-shadow: -100px -100px 0 0 #ffffff;
}
#curved-corner-bottomleft:before {
content: "";
display: block;
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
left: 0;
bottom: 0;
box-shadow: -100px 100px 0 0 #ffffff;
}
You must be logged in to post a comment.