I'm trying to create a diagonal triangle on the screen that changes color when hovered over. However, my current method only creates a 'hack triangle' which is actually just a rectangle and doesn't respond to the transparent section.
Is there a way to make this hover effect work only when hovering directly on the triangle?
body {
padding: 0;
margin: 0;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 100vh 0 0 100vw;
border-color: transparent transparent transparent #007bff;
}
.triangle:hover {
border-color: transparent transparent transparent red;
}<div class="triangle"></div>The responses in other threads are aimed at simple triangles, unlike mine which covers the entire screen with different side lengths and shapes.