CSS 三角形不像正方形？

Question

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

每当您使用 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>

我将整篇文章设为 link，并将 svg 三角形设为 link。但是因为三角形被渲染为一个块，所以有一小部分正好是三角形的镜像，无法点击。

对于一个项目，我想删除不能点击的部分。即红色部分：

Answer 1

这是使用边框操作的纯 CSS 三角形的代码片段：

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

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

请注意，此方式仍可用作正方形，但您可以设置 z-index 以将其置于您希望点击的任何其他内容之后。

Answer 2

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

<div id='triangle'></div>

希望对您有所帮助。

Answer 3

您的示例的快速修复是在 svg 元素上使用 pointer-event:none;。有关 pointer-events on MDN. For browser support, see 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>

另一种方法是将第二个 link 放在一个容器中，并通过旋转和 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>

Answer 4

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>

CSS 三角形不像正方形？

CSS triangle that doesn't work like a square?

html

css

svg

css-shapes

CSS变换

CSS 剪辑路径