One key factor causing the hover effect to only work on the bottom triangle and not the others is due to the stacking order of the containers. The container of the bottom triangle appears above the containers of the other three, which limits the hover interaction to just that area.
Although utilizing the border trick generates triangle shapes, the underlying form remains a square. The appearance of triangles is achieved by making the adjacent borders transparent. Consequently, hovering over the shape targets the transparent regions of the bottom triangle rather than triggering the other triangles' respective hover events.
A suggestion would be to use SVG for such designs, although creating these shapes with CSS alone is feasible given the simplicity of this shape.
SVG:
In an SVG context, multiple triangles within a square can be created using polygon elements, each being individually hoverable. For distinct target links, enclosing the polygons in an a (anchor) tag is recommended.
The example includes anchor implementation for one triangle only
.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:
This CSS solution modifies the provided answer from here by web-tiki. A unique response is necessary due to the simplicity of the current shape, requiring less complexity compared to the initial case.
The square is divided into four identical hoverable triangles through the following steps:
- The parent container, a square, features borders on all sides. This structural choice helps avoid the challenges associated with diagonal line placement in CSS-based triangles.
- Four child elements are added within the container, each sized using Pythagoras theorem computation. These elements are positioned with their top left corner at the square's center, aiding in rotation effects.
- All child elements undergo rotations to depict triangular shapes, with
transform-origin set to top left for axis alignment with the square’s center when rotating.
- The parent has
overflow: hidden to conceal half of each triangle outside its boundaries.
- Note that adding text directly to the triangles may pose challenges due to their rotated nature. Text content should ideally be placed in separate child elements counter-rotated appropriately.
Note: The demo script uses prefix-free library to eliminate browser prefixes requirements.
.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>