I tried to create a triangle with overflow hidden to cover the parts that extend beyond the two circles, but I am only able to display one circle and not two.... https://i.sstatic.net/9ohAZ.png
<div class="big_rond">
<div class="small_rond">
<ul>
<li class="first_triangle"></li>
</ul>
</div>
</div>
.big_rond {
background:#bfd70e;
border-radius:50%;
width: 500px;
height: 500px;
border:2px solid #679403;
margin: auto;
margin-top: 5%;
overflow: hidden;
position: relative;
}
.small_rond {
background:red;
border-radius:50%;
width:150px;
height:150px;
border:2px solid red;
margin: auto;
margin-top: 30%;
}
ul {
list-style: none;
display: flex;
flex-direction: row;
}
li {
}
.first_triangle {
position: relative;
width: 0;
height: 0;
border-style: solid;
margin-left: 20%;
border-width: 80px 300px 80px 0;
border-color: transparent #007bff transparent transparent;
}
I want to hide the parts of my two circles that extend beyond https://i.sstatic.net/ALOK9.jpg