Как правильней всего реализовать этот элемент?

110

11 марта 2022, 17:30

Концепт на изображении. Без наведения виден только круг. При наведении появляются 4 зоны (с цифрами). При наведении на зону, как на картинке, она немного увеличивается.

Использовать можно HTML, CSS и JavaScript в крайнем случае.

Answer 1

На чистом CSS

body { 
  margin: 0; 
  overflow: hidden; 
} 
 
.curcle { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  width: 200px; 
  height: 200px; 
  margin: 25px; 
  border-radius: 100%; 
  background: #ddd; 
  border: 2px solid #333; 
  box-sizing: border-box; 
  transform: rotate(45deg); 
} 
 
.curcle .item { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 50%; 
  height: 50%; 
  background: #ddd; 
  border-color: #333; 
  border-style: solid; 
  border-width: 1px; 
  box-sizing: border-box; 
  opacity: 0; 
} 
 
.curcle .item:nth-child(1) { 
  border-left-width: 2px; 
  border-top-width: 2px; 
  border-top-left-radius: 100%; 
  transform-origin: right bottom; 
} 
 
.curcle .item:nth-child(2) { 
  border-top-width: 2px; 
  border-right-width: 2px; 
  border-top-right-radius: 100%; 
  transform-origin: left bottom; 
} 
 
.curcle .item:nth-child(4) { 
  border-right-width: 2px; 
  border-bottom-width: 2px; 
  border-bottom-right-radius: 100%; 
  transform-origin: left top; 
} 
 
.curcle .item:nth-child(3) { 
  border-bottom-width: 2px; 
  border-left-width: 2px; 
  border-bottom-left-radius: 100%; 
  transform-origin: right top; 
} 
 
.curcle .invert { 
  transform: rotate(-45deg); 
} 
 
.curcle:hover { 
  border: 0; 
} 
 
.curcle:hover .item { 
  opacity: 1; 
} 
 
.curcle .item:hover { 
  transform: scale(1.25); 
} 
 
/* Не относится к коду */ 
#anim {display: none;} 
label {cursor: pointer;} 
#anim:checked ~ label {color: green;} 
#anim:checked ~ .curcle .item { 
  transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}

<input type="checkbox" id="anim"> 
<label for="anim">Включить плавность при наведение</label> 
 
<div class="curcle"> 
  <div class="item"> 
    <div class="invert">1</div> 
  </div> 
  <div class="item"> 
    <div class="invert">2</div> 
  </div> 
  <div class="item"> 
    <div class="invert">4</div> 
  </div> 
  <div class="item"> 
    <div class="invert">3</div> 
  </div> 
</div>