I am looking to design a triangle that resembles the red triangle in the image below:
https://i.sstatic.net/O1oZB.jpg
My attempt at creating this triangle using CSS is as follows:
HTML:
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
CSS:
.div-1 {
position: absolute;
bottom: 0; left: 0;
border-bottom: 385px solid #222;
border-right: 175px solid transparent;
width: 0;
z-index: 5;
pointer-events:none;
}
.div-2 {
position: absolute;
bottom: 0; left: 45px;
border-bottom: 285px solid #ED3237;
border-right: 130px solid transparent;
width: 0;
z-index: 5;
}
.div-3 {
position: absolute;
bottom: 0; left: 45px;
border-bottom: 286px solid #222;
border-right: 105px solid transparent;
width: 0;
z-index: 5;
pointer-events:none;
}
I successfully created the triangle. You can view it on JSFiddle
Now, I want to change the color of the triangle to blue when hovered over.
To achieve this effect, I added the following CSS:
.div-2:hover{
border-bottom: 285px solid blue;
}
Although it initially appeared to work well, upon closer inspection, there was an issue. The color of the triangle changed even when hovering over the transparent area of .div-2, which is not desired. I only want the color to change when hovering over the visible (red) part of .div-2.
After researching online, I learned that using rotate transform instead of borders for the div might be a better approach. However, I could not find a suitable tutorial on creating right angled triangles with different widths and heights like the one mentioned above. Hence, I decided to ask for help. My question is: How can I create a triangle similar to the one shown in the image using rotate transform and CSS3 properties?
Update:
Though SVG is a simple solution, I prefer achieving this with CSS as I also plan to conceal the bottom part of the carousel, as depicted here: https://i.sstatic.net/JUm6e.jpg