具有悬停效果的响应三角形

我最近发现了一篇文章,详细介绍了如何使用纯CSS创建响应三角形.我想进一步将其融入当前的设计中.

我能够将四个三角形完美地放置在方形div中(创建折纸式效果)并且它们具有响应性.

但是,当我尝试合并悬停效果时,它不会改变三角形的颜色 - 只会改变它周围的空白区域.

此外,当我的方形宽度发生变化(保持响应性)时,底部三角形与其他三角形分开 - 因为我使用了绝对定位和底部:0; 将三角形放在正方形内.

有没有人知道如何在纯CSS中实现我想要的效果？这是相关的代码:JSFiddle

HTML:

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;
    }
}

web-tiki.. 5

您可以通过使用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;
}

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