How to create quarter circle of a div, below is the goals shape
Quarter circle at corner of div
(Need 10 reputation to post images)
As we can see every corners has quarter circle and it’s transparent
Quarter circle at every corners
(Need 10 reputation to post images)
What I know that is impossible using border-radius properties, because purposes of border-radius is to create rounded shape in a div. so, I have trying to use 4 additional div and place them at the corner of parent div. Click here, You can see what I’ve done here or you can see the code below,
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="corner-shape top-left"></div>
<div class="corner-shape top-right"></div>
<div class="corner-shape bottom-left"></div>
<div class="corner-shape bottom-right"></div>
</div>
</body>
</html>
CSS
.container {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.corner-shape {
position: absolute;
width: 40px;
height: 40px;
background: #222;
}
.top-left {
left: 0;
border-bottom-right-radius: 100%;
}
.top-right {
right: 0;
border-bottom-left-radius: 100%;
}
.bottom-right {
bottom: 0;
border-top-right-radius: 100%;
}
.bottom-left {
bottom: 0;
right: 0;
border-top-left-radius: 100%;
}
But, still got the problem I cannot make them transparent. I’m out of ideas.
Dat is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1