Problems with hexagon images css? - html

Question

I am trying to make avatar as a hexagon, I have found a css snippet for doing this, but it only worked for non-square images:
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon1 {
width: 80px;
height: 50px;
}
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://media-exp1.licdn.com/dms/image/C560BAQG-vLQJr3J3zg/company-logo_200_200/0?e=2159024400&v=beta&t=cXNxHCDmX7A_e_LGk75XIbL-eVc7VYdHQfSFH39r3Qo')"></div>
</div>
</div>
<br />
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://poemesurleprophete.com/wp-content/uploads/2018/09/la-seule-force.jpg')"></div>
</div>
</div>
The problem as you can see, with images where width equals height it is not exactly a hexagon, I tried to set the background-size to cover, it worked but part of the image is being cropped. Any idea how to solve this?

Answer 1

it's because the hexagon-in2 is rectangular, put in his css class:
width:72%;
margin:0 14%;
background-size:cover;
It will look like:
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 72%;
margin: 0 14%;
height: 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon1 {
width: 80px;
height: 50px;
}
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://media-exp1.licdn.com/dms/image/C560BAQG-vLQJr3J3zg/company-logo_200_200/0?e=2159024400&v=beta&t=cXNxHCDmX7A_e_LGk75XIbL-eVc7VYdHQfSFH39r3Qo')"></div>
</div>
</div>
<br />
<div class="hexagon hexagon1">
<div class="hexagon-in1">
<div class="hexagon-in2" style="background-image:url('https://poemesurleprophete.com/wp-content/uploads/2018/09/la-seule-force.jpg')"></div>
</div>
</div>
hope it will help