Создание геометрических фигур с ручкой для события click

Question

Мое требование - создавать кликабельные области с геометрическими формами внутри квадратного div.

Вот на этом квадратном DIV, когда пользователь нажимает на треугольной части цвет должен измениться на желтый. Аналогично цвет должен измениться при выборе других 2 областей. Я пробовал использовать CSS3, но не смог. Пожалуйста, помогите мне в этом.

Скриншот демо доступен here.

<div class="square"> 
    <div class="trapeziumRt"></div> 
    <div class="trapeziumLt"></div> 
</div> 


.square { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 
.trapeziumRt { 
    border-bottom: 43px solid green; 
    border-left: 50px solid transparent; 
    border-right: 0px solid transparent; 
    height: 0; 
    width: 50px; 
    position: absolute; 
    top: 27px; 
    right: -28px; 
    -webkit-transform: rotate(-90deg); 
} 
.trapeziumLt { 
    border-bottom: 43px solid #C6C76F; 
    border-left: 50px solid transparent; 
    border-right: 0px solid transparent; 
    height: 0; 
    width: 50px; 
    position: absolute; 
    top: 27px; 
    left: 0; 
    -ms-filter: "FlipH"; 
    -webkit-transform: rotate(-89deg); 
} 

Answer 1

SVG - лучший выбор для создания таких форм и добавления событий. Форма, о которой идет речь, может быть создана с использованием комбинации из трех элементов path (одна для треугольника, две для трапеции с обеих сторон).

Элементы SVG path создают требуемую форму путем рисования линий, соединяющих координаты, предоставленные в атрибуте d. Например, здесь треугольник формируется путем отрисовки линии от (1,99) до (50,60), затем от (50,60) до (99,99) и, наконец, закрытия пути путем рисования линии из (99, 99) - (1,99).

После того, как необходимые формы будут созданы, нажми обработчик событий прикрепляются с помощью JavaScript, и когда они нажаты, yellow класса (который устанавливает fill в yellow) будет включаться и выключаться.

window.onload = function() { 
 
    var el = document.querySelectorAll('path'); 
 
    for (var i = 0; i < el.length; i++) { 
 
    el[i].addEventListener('click', function() { 
 
     this.classList.toggle('yellow'); 
 
    }); 
 
    } 
 
}

svg { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
path { 
 
    stroke-width: 2; 
 
    stroke: black; 
 
    fill: transparent; 
 
} 
 
.yellow { 
 
    fill: yellow; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewbox='0 0 100 100'> 
 
    <path id='triangle' d='M1,99 50,60 99,99z' pointer-events="visible" /> 
 
    <path id='trapezium-1' d='M1,1 50,1 50,60 1,99z' pointer-events="visible" /> 
 
    <path id='trapezium-1' d='M50,1 50,60 99,99 99,1z' pointer-events="visible" /> 
 
</svg>

---

Высказывание SVG является лучшим для этого вовсе не означает, что она не может быть сделано с помощью CSS (3). Ниже приведен фрагмент примера для использования CSS. Здесь трапеции создаются с использованием skewY преобразований на двух дочерних элементах. Обработчик события клика и его работа такие же, как применимы для фрагмента SVG.

window.onload = function() { 
 
    var els = document.querySelector('.square,.inner-element-1,.inner-element-2'); 
 
    els.addEventListener('click', function(e) { 
 
    e.target.classList.toggle('yellow'); 
 
    }); 
 
}

.square { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid; 
 
    background: white; 
 
    overflow: hidden; 
 
} 
 
.inner-element-1, 
 
.inner-element-2 { 
 
    position: absolute; 
 
    top: 0px; 
 
    width: calc(50% - 1px); 
 
    height: calc(100% - 1px); 
 
    border: 2px solid; 
 
    background: white; 
 
    z-index: 1; 
 
} 
 
.inner-element-1 { 
 
    left: -2px; 
 
    transform: skewY(-45deg); 
 
    transform-origin: left bottom; 
 
} 
 
.inner-element-2 { 
 
    right: -2px; 
 
    transform: skewY(45deg); 
 
    transform-origin: right bottom; 
 
} 
 
.yellow { 
 
    background-color: yellow; 
 
}

<div class='square'> 
 
    <div class='inner-element-1'></div> 
 
    <div class='inner-element-2'></div> 
 
</div>