Cut circle on the corner of box - html

Question

I want to remove most of the circle and only show the part of the circle that overlaps a square:
I need to cut the red area and leave the darker green area inside the box.
I have a class named circle with a style
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
and a box with style:
width: 100px;
height: 100px;
How can I remove the red area?
My code: https://codepen.io/anon/pen/xpVJoL

Answer 1

You can use negative values for position and overflow:hidden to hide (cut) the area :
.box {
width: 100px;
height: 100px;
border: 1px solid;
position:relative;
overflow:hidden;
}
.circle {
position: absolute;
bottom: -50px;
left: -50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
<div class="box">
<div class="circle"></div>
</div>
UPDATE
And if you want a more fancy way you can use radial-gradient as background and you will have much less code to handle :
.box {
width: 100px;
height: 100px;
border: 1px solid;
background-image:radial-gradient(circle at bottom left, red 45%, transparent 0%);
}
<div class="box">
</div>

Answer 2

Just insert overflow:hidden; in the .container class.

Answer 3

You don't need another div, you can just do it with the :before or :after pseudo-elements:
div {
width: 100px;
height: 100px;
position: relative;
border: 1px solid;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: -50%;
border-radius: 50%;
background: red;
}
<div></div>