具有悬停效果的响应三角形
[英]Responsive triangles with hover effect
问题描述
我最近遇到了一篇文章，详细介绍了如何使用纯CSS创建响应三角形 。 我想更进一步，将其纳入当前设计中。
我能够将四个三角形完美地放置在一个正方形div中（创建折纸类型的效果），并且它们反应灵敏。
但是，当我尝试合并悬停效果时，它不会更改三角形的颜色-只会更改其周围的空白区域。
另外，当我的正方形的宽度发生变化（保持响应度不变）时，底部三角形会与其他三角形分开-因为我使用了绝对定位和底部：0； 将三角形放置在正方形内。
有谁知道解决此问题的方法，以在纯CSS中达到我想要的效果？ 这是相关的代码： JSFiddle
HTML：
<body>
<div class="container">
<div class="box">
<div class="triSectionTop"></div>
<div class="triSectionRight"></div>
<div class="triSectionBottom"></div>
<div class="triSectionLeft"></div>
</div>
</div>
</body>
SCSS：
.container {
box-sizing: border-box;
height: 400px;
width: 400px;
}
.box {
position: relative;
box-sizing: border-box;
height: 400px;
width: 100%;
}
.triSectionTop {
position: absolute;
top: 0;
width: 100%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -200px;
margin-top: -200px;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 200px solid #41a5e8;
}
}
.triSectionRight {
position: absolute;
right: 0;
width: 50%;
height: 0;
padding-top: 50%;
padding-bottom: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top: -200px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-right: 200px solid #4eb2f5;
}
}
.triSectionBottom {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
padding-left: 50%;
padding-bottom: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -200px;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid #5abeff;
}
}
.triSectionLeft {
position: absolute;
left: 0;
width: 0;
height: 0;
padding-top: 50%;
padding-bottom: 50%;
padding-left: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top: -200px;
margin-left: -200px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid #67cbff;
}
}
2 个解决方案
解决方案1
5 已采纳 2015-02-24 07:50:02
通过使用transform-rotate制作三角形，可以实现悬停效果（背景颜色更改和外部框阴影）。
仅在形状实际悬停时，这才允许您触发悬停事件：
.box{ width:500px; height:500px; position:relative; overflow:hidden; } .box > div{ position:absolute; bottom:50%; left:50%; width:75%; height:75%; transform-origin:0 100%; z-index:1; } .triSectionTop{ -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); background:#41A5E8; } .triSectionRight{ -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); background:#4EB2F5; } .triSectionBottom{ -webkit-transform:rotate(135deg); -ms-transform:rotate(135deg); transform:rotate(135deg); background:#5ABEFF; } .triSectionLeft{ -webkit-transform:rotate(225deg); -ms-transform:rotate(225deg); transform:rotate(225deg); background:#67CBFF; } .box > div:hover{ background:teal; box-shadow: 0 0 10px 0 #656565; z-index:2; }
<div class="box"> <div class="triSectionTop"></div> <div class="triSectionRight"></div> <div class="triSectionBottom"></div> <div class="triSectionLeft"></div> </div>
解决方案2
-1 2015-02-24 05:59:24
这可以尝试这个
这是HTML
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
这是CSS
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
这是来源
具有悬停效果的响应图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.