使用句柄创建几何形状以进行单击事件

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变换来创建梯形。 click事件处理程序及其工作方式与适用于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>