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

Question

我目前正在尝试制作一个正方形为4个相同大小的三角形，它们上面有悬停事件。

我正在创建这样的三角形，

.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

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

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> 

Answer 2

这样的事情怎么样： http ： //codepen.io/potterbm/pen/GJmoYj

HTML：

<div class="green">
    <div class="top"></div><div class="left"></div><div class="right"></div><div class="bottom"></div>
</div>

CSS：

.green {
  background-color: #cccccc;

  display: block;
  margin: 100px auto;
  height:100px;
  width:100px;
}

.right, .left, .top, .bottom {
  border-color: transparent;
  border-style: solid;
  border-width: 50px;

  display: block;
  padding: 0;
  width: 0;
  height: 0;
}

.right, .left {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.top, .bottom {
  margin: 0 auto;
}

.top {
  border-top-color: green;

  margin-bottom: -100px;
}

.right {
  border-right-color: blue;
  margin-left: -50px;
}

.bottom {
  border-bottom-color: steelblue;
  margin-top: -100px;
}

.left {
  border-left-color: red;
  margin-right: -50px;
}


.right:hover {
    border-right-color:red;
}

.left:hover {
  border-left-color:red;
}

.top:hover {
  border-top-color:red;
}

.bottom:hover {
  border-bottom-color:red;
}

基本思想是将顶部三角形放在自己的线上，将左右三角形放在同一条线上，将底部三角形放在自己的线上。 然后你只是用负边距来解决它们。 值得注意的是，HTML中缺少空格是有意的。