мне нужно сменить картинки на круг с 4 разделенными частями я бы хотел узнать как лучше это сделать. посмотрите исходник и его работу по ссылке

Question

тут вы можете посмотреть на исходный код с файлами

Answer 1

Ну вообще разделить любую область на любое количество секторов не сложно важно понять для чего это нужно ..области кликабельны

let path = document.querySelectorAll("path");
for (var i = 0; i < path.length; i++) {
  let color = path[i].getAttribute("fill");
  let ids = path[i].getAttribute("id");

  path[i].onclick = function() {
    console.log(`Hex ${color} \nID ${ids}`)
  }
}

.item {
  width: 300px;
}

path {
  cursor: pointer;
}

<div class="item">
  <svg viewBox="0 97 200 200" xmlns="http://www.w3.org/2000/svg">
     <g>
        <path id="yellow" d="m99.785714 103.47619v93.7381h-94.494047c9.4850084-63.16489 44.766313-88.92516 94.494047-93.7381z" fill="#ff0"/>
        <path id="lightgreen" d="m99.785714 103.47619v93.7381h92.982146c-6.77529-60.96906-41.94023-87.09626-92.982146-93.7381z" fill="#0f0"/>
        <path id="lightblue" d="m99.785714 292.46428v-95.24999h92.982146c-5.13166 60.98574-41.62378 86.52053-92.982146 95.24999z" fill="#0ff"/>
        <path id="pink" d="m99.785714 292.46428v-95.24999h-94.494047c1.872486 52.1814 34.163448 83.38453 94.494047 95.24999z" fill="#f0f"/>
     </g>
  </svg>
</div>

Answer 2

На CSS

.menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 150px;
  height: 150px;
  background: #fff;
  overflow: hidden;
  border-radius: 100%;
  position: relative;
}

.menu > div {
  display: block;
  width: calc(50% - 1px);
  height: calc(50% - 1px);
  background: center center / cover;
  opacity: .6;
  z-index: 1;
  transition: all .2s linear;
  cursor: pointer;
}

.menu > .left {margin-right: 1px;}
.menu > .right {margin-left: 1px;}
.menu > .top {margin-bottom: 1px;}
.menu > .bottom {margin-top: 1px;}

.menu > .center,
.menu::after {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.menu > .center {
  z-index: 3;
}

.menu::after {
  content: '';
  background: #fff;
  border: 2px solid #fff;
  z-index: 2;
}

.menu > div:nth-child(1) {background-image: url(https://i.imgur.com/HsIm5Bt.png);}
.menu > div:nth-child(2) {background-image: url(https://i.imgur.com/py2kbfE.png);}
.menu > div:nth-child(3) {background-image: url(https://i.imgur.com/I4zRxSz.png);}
.menu > div:nth-child(4) {background-image: url(https://i.imgur.com/8uN9AUv.png);}
.menu > div:nth-child(5) {background-image: url(https://i.imgur.com/Lgc9SF5.png);}

.menu > div:hover {opacity: 1;}

<div class="menu">
  <div class="left top"></div>
  <div class="right top"></div>
  <div class="left bottom"></div>
  <div class="right bottom"></div>
  <div class="center"></div>
</div>

БЛОГ НА HUSL

мне нужно сменить картинки на круг с 4 разделенными частями я бы хотел узнать как лучше это сделать. посмотрите исходник и его работу по ссылке

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