gpt4 book ai didi

html - CSS将一个正方形分成4个三 Angular 形

转载 作者:太空宇宙 更新时间:2023-11-04 13:52:36 25 4
gpt4 key购买 nike

我目前正在尝试将一个正方形制作成 4 个大小相等的三 Angular 形,上面有悬停事件。

我正在创建这样的三 Angular 形,

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

我发现每个三 Angular 形都位于另一个三 Angular 形之上,这意味着只能悬停一个三 Angular 形,这是我的示例,

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

如您所见,只有底部三 Angular 形(悬停在正方形底部)是可悬停的。我究竟做错了什么?有更好的方法吗?

最佳答案

正如您在问题中已经指出的那样,hover 仅适用于底部三 Angular 形而不适用于其他三 Angular 形的原因是因为底部三 Angular 形的容器位于其他三个三 Angular 形。

虽然使用边框技巧生成三 Angular 形,但实际形状仍然是正方形。它获得三 Angular 形外观只是因为其他三个边框是透明的。现在,当您将鼠标悬停在形状上时,您实际上是在悬停底部三 Angular 形的透明区域,而不是其他三 Angular 形的容器,这就是它们各自的 hover 事件不会被触发的原因。

我个人建议对这些类型的东西使用 SVG,但使用 CSS 实现形状也不是那么复杂。

SVG:

在 SVG 中,您可以使用 polygon 元素在正方形内创建四个三 Angular 形,每个 polygon 都可以单独悬停。如果他们应该有自己的目标链接,您还可以将多边形包含在 a( anchor )标记中。

在代码片段中,我只为一个三 Angular 形实现了 anchor

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

这是对 here 发布的答案的改编通过网络提基。我发布了一个单独的答案,因为这个问题中的形状要简单得多,不需要像另一个问题那样多的工作。

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

  • 容器是一个正方形,所有边都有边框。父级上需要边框,因为使用 CSS 很难实现三 Angular 形上的对 Angular 线。
  • 四个子元素被添加到容器中,它们的高度和宽度是使用毕达哥拉斯定理计算的。然后将它们定位,使它们的左上角位于正方形的中心点(以帮助旋转)。
  • 所有子元素都旋转了适当的 Angular 以形成三 Angular 形。 transform-origin 设置为 top left 以父方 block 的中心点为轴完成旋转。
  • 父级有 overflow: hidden 以防止每个方 block 的另一半可见。
  • 请注意,向 4 个三 Angular 形中添加文本不会是直接的,因为它们也会旋转。文本必须放在子元素内,该子元素必须反向旋转。

注意:演示中包含的脚本是无前缀库,用于避免浏览器前缀。

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

关于html - CSS将一个正方形分成4个三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30676025/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com