Hover effect on triangle

Question

How i can make a modern website with geometry like a triangle,
And have an effect when i’m hover the rectangle ?
What i should use to make that ? SVG or use borders to make triangle ? Or another method ?
Thanks for your answers :)

Answer 1

Use svg with animate tag, using attributes begin and end to detect id.mouseover and id.mouseout

<svg>
<path id="path1" d="m20.75,114.75l54.5,-94l54.5,94l-109,0z" fill="green" stroke="black" stroke-width="0"/>

<animate
xlink:href="#path1"
attributeName="stroke-width"
from="0"
to="5"
dur=".2s"
begin="path1.mouseover"
end="path1.mouseout"
repeatCount="indefinite"
fill="freeze" />
</svg>

https://code.sololearn.com/W2EcvBvHl4kd/?ref=app

Answer 2

Use text tag

Answer 3

You can just use CSS on a DIV to make a triangle and add an effect on hovering. I recommend you to visit Mitali's profile and YouTube channel to know how to make shapes. For the hover part you can use this syntax.

.triangle:hover {
/*EFFECT HERE*/
}

Answer 4

I follow this youtube channel already ^^
but can i have the same result with svg ?

Answer 5

Axel Salenbier sure! SVG is more advanced and versatile than CSS. You can refer to these lessons.

https://code.sololearn.com/Wnc1H3jaH0ua/?ref=app

Answer 6

Thanks a lot

Answer 7

Calvin thx, can i write content into the triangle ?