html - 不像正方形那样工作的 CSS 三 Angular 形？

Question

我想知道是否有任何方法可以创建具有真正三 Angular 形形状的三 Angular 形？或者一种伪造它以尽可能接近的方法？

每当您使用 svg 之类的东西绘制三 Angular 形时，您总是会遇到一个镜像的透明三 Angular 形，因为元素被绘制为框。

我举了一个例子，因为我觉得很难解释这一点:

http://codepen.io/stephan-v/pen/gaxdjm

svg {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  top: 0;
}
svg polygon {
  fill: rgba(168, 210, 71, 0.6);
  cursor: pointer;
}
svg polygon:hover {
  fill: rgba(168, 210, 71, 0.9);
  cursor: pointer;
}
article {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: whitesmoke;
  border: 1px solid lightgrey;
}
article a {
  display: block;
  width: 100%;
  height: 100%;
}

<article>
  <a href="#">
  </a>
  <svg>
    <polygon points="0,0 100,0 100,100" />
  </svg>
</article>

我将整篇文章设为链接，svg 三 Angular 形也设为链接。但是因为三 Angular 形被渲染为一个 block ，所以有一小部分恰好是不可点击的三 Angular 形的镜像。

对于一个元素，我想删除无法点击的部分。也就是红色部分:

Answer 1

CSS 转换

这可以使用纯 CSS 来完成，方法是创建一个元素并旋转它以创建三 Angular 形效果。

我已经简化了代码，这样您就可以清楚地了解到底发生了什么。

div {
  width: 200px;
  height: 200px;
  background: lightgrey;
  position: relative;
  overflow: hidden;
}
div > a {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 65%;
  top: 0;
  transform-origin: left top;
  transform: rotate(-45deg);
  background: blue;
}

<div>
  <a href="#link"></a>
</div>

CSS 剪辑路径

另一种方法是使用 clip-path .它目前还没有得到很好的支持，但似乎是 CSS 的下一个即将使用的功能。

div {
  width: 200px;
  height: 200px;
  background: lightgrey;
  position: relative;
  overflow: hidden;
}
div > a {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 65%;
  top: 0;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  background: blue;
}

<div>
  <a href="#link"></a>
</div>