Building A Circular Navigation with CSS Clip Paths (用CSS路径裁剪遮罩制作环形导航）

IE不支持，但是他们说他们在考虑

如果你用css形状方法来定义裁剪属性，FireFox不支持裁剪路径因为他们现在只支持SVG的裁剪路径属性值。

Webkit浏览器不支持SVG定义的裁剪路径的指针事件。这是一个BUG，默认的指针事件不应该被局限于可见的裁剪元素外。

按照期望的行为来说，当你用CSS形状方法来定义一个裁剪路径，这些浏览器应该是正确支持指针事件。然而，当你通过用SVG的裁剪路径属性来路径裁剪，指针事件应该依旧被局限于可见的裁剪元素外。这会干扰和阻止任何隐藏于裁剪路径下的元素的指针事件。我在写这篇文章的时候提交了bug，让我们期待能够尽快被修复。这个BUG意味着在这篇文章的例子中，依旧存在。对不起。
还有一个渲染的BUG也存在于其他浏览器中，我已经提交了这个BUG。

.element {
  clip-path: url(#SVGPolygonShape); /* For Firefox */
  clip-path: polygon(...); /* For other browsers */
} 最后要注意的一件事是Firefox只支持外部引用的SVG，所有的其他浏览器要求SVG路径定义在文档之中。

<ul class="menu">
  <li class="one">
    <a href="#">
      <span class="icon">icon-1</span>
    </a>
  </li>
  <li class="two">
    <a href="#">
      <span class="icon">icon-2</span>
    </a>
  </li>
  <li class="three">
    <a href="#">
      <span class="icon">icon-3</span>
    </a>
  </li>
  <li class="four">
    <a href="#">
      <span class="icon">icon-4</span>
    </a>
  </li>
  <li class="five">
    <a href="#">
      <span class="icon">icon-5</span>
    </a>
  </li>
  <li class="six">
    <a href="#">
      <span class="icon">icon-6</span>
    </a>
  </li>
</ul>

clip-path: url(#clipPathID);

 M
 L
 A
 z

<svg height="0" width="0">
  <defs>
    <clipPath clipPathUnits="objectBoundingBox" id="sector">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M0.5,0.5 l0.5,0 A0.5,0.5 0 0,0 0.75,.066987298 z"></path>
    </clipPath>
  </defs>
</svg>

.menu {
  position: relative;

  list-style: none;
  margin: 30px auto;

  /* padding trick for maintaining aspect ratio */
  height: 0;
  padding: 0;
  padding-top: 70%;
  width: 70%;
}

.menu li { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  clip-path: url(#sector)
}

.menu li a {
  display: block;
  width: 100%;
  height: 100%;
}

.menu li:hover {
  background-color: gold;
}

.one {
  background-color: $base;
  transform: rotate(0deg);
}
.two {
  background-color: darken($base, 7%);
  transform: rotate(-60deg);
}
.three {
  background-color: darken($base, 14%);
  transform: rotate(-120deg);
}
.four {
  background-color: darken($base, 21%);
  transform: rotate(-180deg);
}
.five {
  background-color: darken($base, 28%);
  transform: rotate(-240deg);
}
.six {
  background-color: darken($base, 35%);
  transform: rotate(-300deg);
}

clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);

<svg height="0" width="0">
  <defs>
    <clipPath clipPathUnits="userSpaceOnUse" transform="matrix(1,0,0,1,0,0)" id="one-2">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path>
    </clipPath>
    <clipPath clipPathUnits="userSpaceOnUse" transform="matrix(0.5,-0.86602,0.86602,0.5,-91.5063509461097,341.5063509461096)" id="two-2">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path>
    </clipPath>
    <clipPath clipPathUnits="userSpaceOnUse" transform="matrix(-0.49999,-0.86602,0.86602,-0.49999,158.49364905389024,591.5063509461097)" id="three-2">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path>
    </clipPath>
    <clipPath clipPathUnits="userSpaceOnUse" transform="matrix(-1,0,0,-1,500,500)" id="four-2">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path>
    </clipPath>
    <clipPath clipPathUnits="userSpaceOnUse" transform="matrix(-0.5,0.86602,-0.86602,-0.5,591.5063509461097,158.4936490538905)" id="five-2">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path>
    </clipPath>
    <clipPath clipPathUnits="userSpaceOnUse" transform="matrix(0.5,0.86602,-0.86602,0.5,341.5063509461096,-91.5063509461097)" id="six-2">
      <path fill="none" stroke="#111" stroke-width="1" class="sector" d="M250,250 l250,0 A250,250 0 0,0 375,33.49364905389035 z"></path>
    </clipPath>
  </defs>
</svg>