Question

我想知道有没有办法创建一个真三角形的三角形？还是一种伪造它尽可能接近的方法？

每当你用svg之类的东西绘制一个三角形时，你总是会被一个镜像的透明三角形所困，因为元素被绘制成方框。

我做了一个例子，因为我发现很难解释这个：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

我将整篇文章作为链接，svg三角形也是一个链接。但是因为三角形被渲染成一个块，所以有一小部分正是三角形的镜像不可点击。

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

Answer 1

CSS转换

这可以通过创建元素并旋转它以创建三角形效果来使用纯CSS来完成。

我已经简化了代码，因此您可以清楚地了解正在发生的事情。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS剪辑路径

另一种方法是使用clip-path。它在当下得不到很好的支持，但似乎是CSS使用的下一个即将到来的功能。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

另一种方法是将第二个链接放在容器中并使用旋转，overflow:hidden;您可以获得所需的结果。示例：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

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

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

这样你就不必用SVG添加它。

请注意，这种方式仍然可以作为正方形使用，但您可以设置z-index以将其置于您想要点击的任何其他位置之后。

Answer 4

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

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

希望这会对你有所帮助。

CSS三角形不像方形一样工作？

4 个答案:

CSS转换

CSS剪辑路径