DEMO | zp25

因为webkit/blink-based浏览器对SVG clip path的pointer事件支持不够合理，ff则不支持CSS shape function，具体说明查看Browser Support (and Bugs)部分，因此在webkit/blink-based中使用图形函数，ff中使用SVG clip path

#clip-path {
  position: relative;
  width: 85vw;
  max-width: torem(500px);
  height: 85vw;
  max-height: torem(500px);
  list-style: none;
  padding: 0;
  margin: 0 auto;

  .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: url('#sector');

    .anchor {
      display: block;
      width: 100%;
      height: 100%;

      &::after {
        content: attr(data-button);
        position: absolute;
        right: 15%;
        top: 30%;
        transform: rotate(60deg);
        color: darken(#a5e2f3, 60%);
        font-size: torem(20px);
      }
    }

    @for $i from 0 through 5 {
      &.item-#{$i + 1} {
        background-color: darken(#a5e2f3, $i * 7%);
        transform: rotate($i * -60deg);
      }
    }

    &:hover {
      background-color: color(gold);
    }
  }
}

/**
 * 点击事件处理
 */
function handler(e) {
  e.preventDefault();

  const btn = e.target.dataset.button;

  if (btn) {
    console.log(`Click ${btn}`); // eslint-disable-line no-console
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('#clip-path');

  wrapper.addEventListener('click', handler, false);
}, false);