不像正方形那样工作的CSS三角形？答案

【问题标题】：CSS triangle that doesn't work like a square?不像正方形那样工作的CSS三角形？
【发布时间】：2015-10-13 17:55:52
【问题描述】：

我想知道实际上有什么方法可以创建具有真正三角形形状的三角形吗？或者是一种伪造它以尽可能接近的方法？

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

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

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 三角形也设为链接。但是因为三角形被渲染为一个块，所以有一小部分正好是三角形的镜像，不能点击。

对于一个项目，我想删除无法点击的部分。就是红色部分：

【问题讨论】：

你想用什么方式删除它？例如，如果您只希望可见三角形处理点击，则可以将事件侦听器添加到 <polygon> 元素。见this edit。
我无法复制你的链接:(
我已经有一个事件监听器我想防止红色部分阻塞它下面的内容。

标签： html css svg css-shapes

【解决方案1】：

CSS 变换

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

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

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>

【讨论】：

喜欢第一个解决方案。非常聪明的方法:)

【解决方案2】：

您的示例的快速解决方法是在 svg 元素上使用 pointer-event:none;。有关pointer-events on MDN 的更多信息。如需浏览器支持，请参阅canIuse。

svg {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  top: 0;
  pointer-events: none;
}
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>

另一种方法是将第二个链接放入容器中，并通过旋转和overflow:hidden; 获得所需的结果。示例：

div{
  position:relative;
  width:200px; height:200px;
  overflow:hidden;
}
a {display:block}

#l1{
  width:100%; height:100%;
  background:grey;
}
span{
  position:absolute;
  left:50%;top:0;
  width:50%; height:72%;
  transform-origin:0 0;
  transform:rotate(-45deg);
  overflow:hidden;
}
#l2{
  width: 100%; height:70%;
  transform-origin:inherit;
  transform:rotate(45deg);
  background:gold;
}

<div>
  <a id="l1" href="#link1"></a>
  <span>
    <a id="l2" href="#link2"></a>
   </span>
</div>

【讨论】：

【解决方案3】：

这是一个使用边框操作的纯 CSS 三角形的代码 sn-p：

#triangle{
    width: 0; 
    height: 0; 
    border-bottom: 25px solid transparent;
    border-right: 25px solid black;
}

这样您就不必使用 SVG 添加它。

请注意，这种方式仍然可以作为正方形使用，但您可以设置 z-index 以将其置于您希望被点击的任何其他内容的后面。

【讨论】：

【解决方案4】：

#triangle {
  width: 0px;
  height: 0px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #f00;
}

&lt;div id='triangle'&gt;&lt;/div&gt;

希望这会对你有所帮助。

【讨论】：