CSS将一个正方形分成4个三角形 [英] CSS split a square into 4 triangles

问题描述

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

我正在创建一个具有相同大小的4个三角形， >

  .right，left，.top，.bottom {
 position：relative; 
 width：26px; 
} 
 
 .right：之前{
位置：绝对; 
 display：inline-block; 
 border-top：26px纯色透明; 
 border-right：26px solid #eee; 
 border-bottom：26px纯透明; 
 left：26px; 
 top：0px; 
内容：''; 
 
 $ / code> 

我发现每个三角形彼此重叠，意味着只有一个三角形可以徘徊，这里是我的例子，

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

正如你所看到的，只有底部的三角形（悬停在方形底部）是可以忍受的。我究竟做错了什么？有没有更好的方法来做到这一点？ 正如你已经在你的问题中指出的那样， hover 只能在底部三角形上工作，而不能在其他三角形上工作，因为底部三角形的容器放置在其他三个三角形的容器顶部。

使用边框技巧生成三角形时，实际形状仍然是一个正方形。它只是因为其他三个边框是透明的而获得三角形外观。现在，当你悬停在形状上时，你实际上将底部三角形的透明区域徘徊，而不是其他三角形的容器，这就是为什么它们各自的 hover 事件没有得到触发。

我个人推荐使用SVG来处理这些类型的东西，但是用CSS实现这种形状并不是那么复杂。

SVG： 在SVG中，您可以使用 polygon 元素在方形内创建四个三角形，每个多边形可以单独悬停。如果他们应该有自己的目标链接，也可以在 a （锚点）标记中包含多边形。

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

  .square {height：400px;宽度：400px; overflow：hidden;} svg {height：100％; width：100％;} polygon {fill：aliceblue;中风：深红色; stroke-linejoin：round;} polygon：hover {fill：cornflowerblue;}  

 < div class ='square'> < svg viewBox ='0 0 100 100'> < a xlink：href ='http：//google.com'> <多边形点='5,5 50,50 95,5'/> < / A> <多边形点='5,5 50,50 5,95'/> <多边形点='5,95 50,50 95,95'/> <多边形点= '95,5 50,50 95,95'/> < / svg>< / div>  

$ b

---

CSS：

这是 。我发布了一个单独的答案，因为这个问题的形状要简单得多，并且不需要像另一个那么多。

这个正方形被分成四等份使用以下方法创建大小可悬停的三角形：

• 容器是一个正方形，并且在其所有边上都有边框。由于三角形上的对角线要用CSS实现要困难得多，因此边框在父级上是必需的。


• 将四个子元素添加到使用毕达哥拉斯计算高度和宽度的容器定理。然后定位它们，使其左上角位于方形的中心点（以帮助旋转）。


• 所有子元素都旋转适当的角度以形成三角形。将 transform-origin 设置为左上角，以父方块的中心点为轴进行旋转。


• 父母有 overflow：hidden 以防止每个方格的另一半可见。


• 请注意，将文字添加到4个三角形不会很直接，因为它们也会旋转。文本必须放置在必须反转的子元素中。

^{注意：脚本包含在该演示是用于避免浏览器前缀的前缀自由库。}

  .square {position：relative; height：200px;宽度：200px;边框：2px实心深红色;溢出：隐藏; transition：all 1s;}。top，.left，.right，.bottom {position：absolute;身高：calc（100％/ 1.414）;宽度：计算（100％/ 1.414）;顶部：50％;剩下：50％;边框：1px实心深红色;转换：旋转（45deg）;}。顶部{转换：旋转（-135deg）;}。左{变换：旋转（-45deg）;}旋转（135deg）;}。square> div：hover {background：tomato;} / *仅用于演示* /。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>

I am currently trying to make a square be 4 triangles of equal size that have hover events on them.

I am creating the triangles like this,

.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: '';
}

What I am finding is that each triangle sits above one another meaning only one triangle can be hovered, here is my example,

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

As you can see only the bottom triangle (hover at the bottom of the square) is hoverable. What am I doing wrong? Is there a better way of doing this?

解决方案

As you have already indicated in your question, the reason why the hover works only on the bottom triangle and not the others is because the container of the bottom triangle is placed on top of the container of the other three triangles.

While using the border trick to produce triangles, the actual shape is still a square. It gets the triangle appearance only because the other three borders are transparent. Now when you hover on the shape you are actually hovering the transparent areas of the bottom triangle and not the containers of the other triangles which is why their respective hover events don't get triggered.

I would personally recommend using SVG for these type of things but the shape is not all that complex to achieve with CSS either.

SVG:

In SVG, you could make use of the polygon elements to create four triangles within the square and each polygon is hover-able separately. If they should have their own target links, you can also enclose the polygons within an a (anchor) tag.

^{In the snippet, I have implemented the anchor only for one triangle}

.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:

This is an adaptation of the answer posted by here by web-tiki. I am posting a separate answer because the shape in this question is much simpler and doesn't require as much work as the other one.

The square is split into four equal sized hover-able triangles using the following method:

• The container is a square and has borders on all its sides. The borders are required on the parent because diagonal lines on the triangle are much much more difficult to achieve with CSS.
• Four child elements are added to the container whose height and width are calculated using Pythagoras theorem. They are then positioned such that their top left corner is on the center point of the square (to help with the rotation).
• All the child elements are rotated by the appropriate angles to form the triangles. The transform-origin is set as top left to have the rotation done with the parent square's center point as the axis.
• The parent has overflow: hidden to prevent the other half of each square from being visible.
• Note that adding text into the 4 triangles will not be straight-forward because they would also be rotated. The text would have to be put inside a child element which must either be counter rotated.

^{Note: The script included in the demo is the prefix free library which is used to avoid browser prefixes.}

.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>

这篇关于CSS将一个正方形分成4个三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！