Centre an image on top of a CSS shape?

I am trying to centre an image on to a Hexagon made using CSS.

The code I Currently have is:

HTML

<li class="img-social-container">       <div class="hexagon"></div>       <a><img class="img-social" src="icons/logo-github.png" alt="github"></a>  </li>  

CSS

.img-social {      width: 25px;      height: 25px;       }    .hexagon {      position: relative;      width: 35px;       height: 20.21px;      background-color: #525555;      margin: 10.10px 0;  }      .hexagon:before,  .hexagon:after {      content: "";      position: absolute;      width: 0;      border-left: 17.5px solid transparent;      border-right: 17.5px solid transparent;  }    .hexagon:before {      bottom: 100%;      border-bottom: 10.10px solid #525555;  }    .hexagon:after {      top: 100%;      width: 0;      border-top: 10.10px solid #525555;  }    

I also want the image to be ontop of the hexagon wich is another problem I am having.

https://stackoverflow.com/questions/67238452/centre-an-image-on-top-of-a-css-shape April 24, 2021 at 09:07AM