Responsive triangles with hover effect

Question

I recently came across an article detailing how to create responsive triangles with pure CSS. I was wanting to take this a step further to incorporate it into a current design.

I was able to get four triangles placed within a square div perfectly (creating an origami-type effect) and they are responsive.

However when I try to incorporate a hover effect, it does not change the color of the triangle - only the empty space around it.

Also, when my square's width changes (keeping with the responsiveness) the bottom triangle separates from the others - because I used absolute positioning and bottom: 0; to place the triangles within the square.

Does anyone know a way around this to achieve my desired effect in pure CSS? Here is the relevant code : 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;
    }
}

Oh sorry I did not specify that, and forgot to include my failed code. I wanted a box-shadow around the outside of the triangle if possible. — Sabolis, Feb 24 '15 at 06:00

score 5 · Accepted Answer · edited May 23 '17 at 12:07

You can achieve the hover effect (background-color change and outside box-shadow) by making the triangles with transform-rotate.

This will allow you to triger the hover event only when the shape is actualy hovered :

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>

You are a beautiful being. Thank you! – Sabolis Feb 24 '15 at 08:37 — Sabolis, Feb 24 '15 at 08:37

score -1 · Answer 2 · answered Feb 24 '15 at 05:59

This will work try this

Here is the Html

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

Here is the 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; 
}

here is the source

Responsive triangles with hover effect

2 Answers2