CSS将正方形分割成4个三角形

Question

我目前正在尝试将一个正方形分成四个大小相等的三角形，并在它们上面添加hover事件。

我是这样创建三角形的，

.right, left, .top, .bottom {
    position: relative;
    width: 26px;
}

.right:before{
  position: absolute;
  display: inline-block;
  border-top: 26px solid transparent;
  border-right: 26px solid #eee;
  border-bottom: 26px solid transparent;
  left: 26px;
  top: 0px;
  content: '';
}

我发现每个三角形都位于另一个三角形上方，这意味着只能悬停在一个三角形上。以下是我的示例：

http://codepen.io/anon/pen/qdmbKz

正如您所看到的，只有底部三角形（在正方形底部悬停）是可悬停的。我做错了什么？有更好的方法吗？

- Udders

---

如果我理解正确，您需要类似于这样的东西：https://dev59.com/8WAg5IYBdhLWcg3w1t_y - Kashif Ullah

Answer 1

正如你在问题中所指出的原因，hover 仅适用于底部三角形而不是其他三角形，是因为底部三角形的容器放在其他三角形的容器上面。

使用边框技巧制作三角形时，实际形状仍然是正方形。之所以看起来像是三角形，是因为其他三条边是透明的。现在当你悬停在形状上时，你实际上是悬停在底部三角形的透明区域上，而不是其他三角形的容器上，这就是它们的各自的 hover 事件没有被触发的原因。

我个人建议在这些类型的事情中使用 SVG，但是使用 CSS 也可以实现这种形状，而且并不复杂。

SVG:

在 SVG 中，你可以使用 polygon 元素在正方形内创建四个三角形。每个 polygon 都可以单独悬停。如果它们应该有自己的目标链接，你还可以在 a（锚）标签中包含多边形。

^{在代码片段中，我只为一个三角形实现了锚点。}

.square {
  height: 400px;
  width: 400px;
  overflow: hidden;
}
svg {
  height: 100%;
  width: 100%;
}
polygon {
  fill: aliceblue;
  stroke: crimson;
  stroke-linejoin: round;
}
polygon:hover {
  fill: cornflowerblue;
}

<div class='square'>
  <svg viewBox='0 0 100 100'>
    <a xlink:href='http://google.com'>
      <polygon points='5,5 50,50 95,5' />
    </a>
    <polygon points='5,5 50,50 5,95' />
    <polygon points='5,95 50,50 95,95' />
    <polygon points='95,5 50,50 95,95' />
  </svg>
</div>

---

CSS：

这是对web-tiki在此处发布的答案进行了适应。我发布了一个单独的答案，因为此问题中的形状要简单得多，并不像另一个问题那样需要太多的工作。

使用以下方法将正方形分成四个大小相等的可悬停的三角形：

• 容器是正方形，并且其所有边缘都有边框。父级上需要这些边框，因为使用CSS实现三角形上的对角线要困难得多。
• 将四个子元素添加到容器中，它们的高度和宽度使用勾股定理进行计算。然后，将它们放置在正方形的中心点上，以帮助旋转。
• 通过适当的角度旋转所有子元素来形成三角形。将transform-origin设置为top left，使旋转沿父正方形的中心点为轴进行。
• 父级具有overflow: hidden，以防止每个正方形的另一半可见。
• 请注意，在4个三角形中添加文本并不直接。因为它们也会被旋转。文本必须放在一个子元素中，该子元素必须反向旋转。

^{注意：演示中包含的脚本是无前缀库，用于避免浏览器前缀。}

.square {
  position: relative;
  height: 200px;
  width: 200px;
  border: 2px solid crimson;
  overflow: hidden;
  transition: all 1s;
}
.top,
.left,
.right,
.bottom {
  position: absolute;
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  top: 50%;
  left: 50%;
  border: 1px solid crimson;
  transform-origin: 0% 0%;
}
.right {
  transform: rotate(-45deg);
}
.bottom {
  transform: rotate(45deg);
}
.top {
  transform: rotate(-135deg);
}
.left {
  transform: rotate(135deg);
}
.square > div:hover {
  background: tomato;
}

/*Just for demo*/

.square:hover{
  height: 300px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='square'>
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="left"></div>
</div>

- Harry