我最近看到一篇文章，详细介绍了如何使用纯 CSS 创建响应式三 Angular 形。我想更进一步，将其纳入当前的设计中。
我能够将四个三 Angular 形完美地放置在一个正方形 div 中(创建折纸类型的效果)，并且它们具有响应能力。
但是，当我尝试合并悬停效果时，它不会改变三 Angular 形的颜色 - 只会改变它周围的空白区域。
此外，当我的方 block 的宽度发生变化(与响应能力保持一致)时，底部三 Angular 形与其他三 Angular 形分开 - 因为我使用了绝对定位和底部:0;将三 Angular 形放置在正方形内。
有谁知道如何解决这个问题，以在纯 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;
}
}
最佳答案
您可以通过设置 triangles with transform-rotate 来实现悬停效果(背景颜色变化和外部框阴影) 。
这将允许您仅在形状实际悬停时触发悬停事件:
<强> DEMO
.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>关于css - 具有悬停效果的响应式三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28688926/