Как сверстать круг, состоящий из четырёх сегментов?

Question

Необходимо сверстать круг, как тут. Требуется, чтобы он состоял из 4 частей (отдельных элементов), чтобы можно было на них назначить события.

Answer 1

Ну это же очень просто, что у вас не получилось?

.roundBlock {
    background: #fff;
    position: relative;
    float: left;
    margin-right: 3em;
    width: 302px;
    height: 295px;
    -webkit-border-radius: 150px 150px 150px 150px;
    border-radius: 150px 150px 150px 150px;
    -moz-box-shadow: 2px 1px 12px #aaa;
    -webkit-box-shadow: 2px 1px 12px #aaa;
    -o-box-shadow: 2px 1px 12px #aaa;
    box-shadow: 2px 1px 12px #aaa;
}

.roundBlock ul{
margin:0;
padding:0;
}

.red:hover, .blue:hover, .yellow:hover, .green:hover {
    border: 2px solid black;
}

.red, .blue, .yellow, .green {
    opacity: 0.6;
    height: 290px;
    -webkit-border-radius: 150px 150px 150px 150px;
    border-radius: 150px 150px 150px 150px;
    position: absolute;
    text-indent: 10000px;
}


.red {
    background: #FF5643;
    clip: rect(0px, 300px, 150px, 150px);
    width: 296px;
}

.blue {
    background: dodgerblue;
    clip: rect(0px, 150px, 150px, 0px);
    width: 300px;
}

.yellow {
    background: #FEEF33;
    clip: rect(150px, 150px, 300px, 0px);
    width: 300px;
}

.green {
    background: #BEDE15;
    clip: rect(150px,300px, 300px, 150px);
    width: 296px;
}

<div class="roundBlock">
            <ul>
                <li class="red" data-tile="1"></li>
                <li class="blue" data-tile="2"></li>
                <li class="yellow" data-tile="3"></li>
                <li class="green" data-tile="4"></li>
            </ul>
        </div>

Answer 2

SVG вариант

При наведении сектора выделяются с помощью SVG фильтров, которые создают тень.
Добавлены ссылки и подсказки. Они появляются при удержании курсора на секторе.

path:hover {
filter:url(#drop-shadow);
}

<svg width="300" height="300" viewBox="-5 -5 220 220" >
 <defs>  
     <!-- Фильтр для создании тени при наведении -->
<filter id="drop-shadow" x="-20%" y="-20%" height="130%" width="130%" >
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
</defs> 
      <!-- Белый круг с тенью -->
<circle cx="103" cy="103" r="102" fill="white" filter="url(#drop-shadow)" opacity="0.5"/> 
 <g transform="translate(100,100) rotate(45 0 0)" >
   <a xlink:href="#"> 
     <title> #1. Первый сектор </title>
    <path class="path1" d="M0 0-70-70A99 99 0 0 1 70-70Z" fill="#FF998D"/>
    </a> 
    <a xlink:href="#"> 
     <title> #2. Второй сектор </title>
     <path class="path2" d="M0 0 70-70A99 99 0 0 1 70 70Z" fill="#D7EB72"/> 
     </a>
      <a xlink:href="#"> 
        <title> #3. Третий сектор </title> 
      <path class="path3" d="M0 0 70 70A99 99 0 0 1-70 70Z" fill="#FEF584"/>
      </a>
      <a xlink:href="#"> 
        <title> #4. Четвертый сектор </title> 
       <path class="path4" d="M0 0-70 70A99 99 0 0 1-70-70Z" fill="#77BCFF"/> 
      </a> 
  </g>
</svg>

БЛОГ НА HUSL

Как сверстать круг, состоящий из четырёх сегментов?

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

SVG вариант