Обрезка блока по кругу в размер img

Question

Хочу сделать меню из фото, но не всё получается. Цифрами отмечены отдельные рисунки. каждый это блок в котором фото + ссылка на страницу. Хочу разместить посередине фото круга, но так что бы за углами которые обведены фиолетовым были доступны ссылки соответствующих блоков. Помогите пожалуйста.

Answer 1

Фото круга незачем делать, лучше сверстать

.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>

БЛОГ НА HUSL

Обрезка блока по кругу в размер img

Ответы (1 шт):