Intersection of the cluster in size img

[emerson]

I want to make a menu from the photo, but it's not working. The numbers show individual drawings, each of which is a photo + page reference. I'd like to have a picture of the circle in the middle, but for the angles that have been purple, references to the blocks are available. Please help me.

[morde]

There's nothing to do with the lap.

.box{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 300px;
}
.box-img{
    display: inline-flex;
    width: 50%;
    overflow: auto;
    box-sizing: border-box;
}
.box-img1 {
    border-top-left-radius: 100%;
    border-top: 10px solid #f3f000;
    border-left: 10px solid #f3f000;
}
.box-img2 {
    border-top-right-radius: 100%;
    border-top: 10px solid #ff9f00;
    border-right: 10px solid #ff9f00;
}
.box-img3 {
    border-bottom-left-radius: 100%;
    border-bottom: 10px solid #008dd3;
    border-left: 10px solid #008dd3;
}
.box-img4 {
    border-bottom-right-radius: 100%;
    border-bottom: 10px solid #a2a2a2;
    border-right: 10px solid #a2a2a2;
}
.box-img img{
    width: 100%;
}
.circle {
    position: absolute;
    width: 100px;
    height: 100px;
    background: white;
    box-shadow: inset 0px 0px 9px 2px black;
    border-radius: 100%;
}

<div class="box">
    <a href="#" class="box-img box-img1"><img src="https://i.ibb.co/Xx4shbp/img.jpg" alt="img" border="0"></a>
    <a href="#" class="box-img box-img2"><img src="https://i.ibb.co/Xx4shbp/img.jpg" alt="img" border="0"></a>
    <a href="#" class="box-img box-img3"><img src="https://i.ibb.co/Xx4shbp/img.jpg" alt="img" border="0"></a>
    <a href="#" class="box-img box-img4"><img src="https://i.ibb.co/Xx4shbp/img.jpg" alt="img" border="0"></a>
    <span class="circle"></span>
</div>