Cross browser hexagon shape with image and border (no SVG or background image)

I have already asked once how to create a hexagonal shape in pure html / css. With a little help, I found a solution that works great in chrome and safari, but neither firefox nor IE support the clip property.

The problems I mentioned in the last question are several:

• I cannot use SVG
  
  (if possible with and <img>-element
  
  instead of <image>-element
  
  )
• I cannot use the image both background-image
  
  via CSS
• Making a hexagon shape with borders doesn't help as I couldn't add an image inside
• The image will be uploaded to <img>-tag
  
  
• The image can either have no background or be a normal image as shown in the example shown
• The hexagon must be on the side not on the edge

Many have asked a similar question - some could resolve it with svg, some didn't need a border, others didn't, but I couldn't find anything that fit my requirements.

body {
  background: orange;
}

.hex {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 103.92px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex-background {
  position: absolute;
  background-color: orange; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 116px; /* container height - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex img {
  position: absolute;
  width: 116px; /* container height - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}
      

        
        
        
      

    

<div class="hex">
  <div class="hex-background">
    <img src="https://img.clipartfest.com/5e18aeec4df9d62fe5cb5e198e4c56c8_locked-padlock-lock-icon-lock-and-key-clipart-transparent-background_420-420.png">
  </div>
</div>
      

        
        
        
      

    

I prepared the code as it works in chrome here . As you can see, I can create a hexagonal shape, have a border, and load an image even with a transparent background into it.

Can anyone help me make this cross browser compatibility? Is this possible with the requirements I have? Could it be possible to achieve this with javascript or jquery?

As always, any help would be greatly appreciated.

EDIT

It seems almost impossible.

I have an idea that I'm not sure about, maybe:

Is it possible to get the source (like "lalala / lala.png") from the src through img element and exchange that img element for the construct needed for the svg approach with jquery or javascript?

given that:

<img src="lalala/lala.png">

      

        
        
        
      

    

in js:

get src /* result = "lalala/lala.png" */
delete <img src="lalala/lala.png">
put <svg width="a" height="b">
        <image xlink:href="lalala/lala.png" width="a" height="b" />
    </svg>
    where <img scr="lalala/lala.png> has been

      

        
        
        
      

    

Note

I have changed the requirements in the list above.

Why are there so many requirements? The problem is that the image to be displayed inside the hexagon is provided by a backend where the user can upload images (which will most likely be either .jpg or PNG format). The backend will provide these images in html constructs like this:

<img src="somepath/examplepic.png" alt="something"> 

      

        
        
        
      

    

Especially this part made it much more difficult than I previously thought. Many solutions to this problem included CSS styling

background-image: url("somepath/examplepic.png");

      

        
        
        
      

    

which doesn't work as the backend will provide the image as above. My sheet is prohibited.

svg approach doesn't work either because if you want the image to be cut to shape you have to use

<image xlink:href="lalala/lala.png" width="a" height="b" />

      

        
        
        
      

    

inside <svg>-element

that doesn't work either because it isn't <img>-element

.

So you can see that these requirements are not being met by me because I want to make it complex, but because of the environment I am working with.