Recently, I was assisting a friend in creating a pentagon using CSS - it turned out to be more challenging than I expected.
If you take a look at this link, you'll see what I mean. It consists of 5 triangles created with CSS and then rotated and aligned correctly.
However, I wanted to add some animation when hovering the mouse over the pentagon. The issue is that when the triangles are drawn, their div remains rectangular and overlaps with other divs. Is there a way to fix this without moving the triangles further apart?
The alignments are not working as intended in this jsfiddle. Here's the code in the jsfiddle:
HTML
<body>
<div id="pentagontopleft" class="pentagon"></div>
<div id="pentagontopright" class="pentagon"></div><br>
<div id="pentagonbotleft" class="pentagon"></div>
<div id="pentagonbotright" class="pentagon"></div><br>
<div id="pentagonbotmid" class="pentagon"></div>
</body>
CSS
#pentagontopleft {
margin:70px 0 5px 150px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform:rotate(144deg);
-ms-transform:rotate(144deg); /* IE 9 */
-webkit-transform:rotate(144deg); /* Safari and Chrome */
}
#pentagontopright {
margin:70px 0 5px -180px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform:rotate(216deg);
-ms-transform:rotate(216deg); /* IE 9 */
-webkit-transform:rotate(216deg); /* Safari and Chrome */
}
#pentagonbotright {
margin:-85px 0 5px -80px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform:rotate(288deg);
-ms-transform:rotate(288deg); /* IE 9 */
-webkit-transform:rotate(288deg); /* Safari and Chrome */
}
#pentagonbotleft {
margin:-85px 0 5px 100px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform:rotate(72deg);
-ms-transform:rotate(72deg); /* IE 9 */
-webkit-transform:rotate(72deg); /* Safari and Chrome */
}
#pentagonbotmid {
margin:-150px 0 5px 225px;
width: 0;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
}
canvas {
margin-left: -50px;
}
JS
$(document).ready(function() {
$('.pentagon').mouseenter(function() {
$(this).css('border-color','red transparent');
});
$('.pentagon').mouseleave(function() {
$(this).css('border-color','#37272e transparent')
})
});