I've already asked once how to create a hexagonal shape in pure html/css. With a little help I found a solution that works just fine in chrome and safari, but neither firefox nor IE support the clip-path property.
The problems as I've already stated in the last question are a few:
- I can't use
SVG(unless there is a possibility with and<img>-elementinstead of an<image>-element) - I can't use the image as
background-imagethrough CSS - Creating a hexagonal shape with borders ain't no help as I wouldn't be able to add an image inside
- The image will be loaded in an
<img>-tag - The image can either have no background or be a normal picture as in the example shown
- The hexagon should be standing on a side not on an edge
Many have asked a similar question - some could resolve it with svg, some didn't need the border, others didn't have a picture -, yet I couldn't find something that would work with 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've prepared the code as it works in chrome here. As you can see I can create the hexagonal shape, have a border and load an image even with transparent background into it.
Can anyone help me make this cross-browser-compatible? Is this even possible with the requirements I have? May there be a possibility to achieve this with either javascript or jquery?
As always any help would be highly appreciated.
EDIT
It seems that this is almost impossible.
I have an idea in mind which I'm not sure is possible:
Is it possible to get the source (eg. "lalala/lala.png") from an img-element src through and exchange that img-element with the construct needed for the svg-approach with jquery or javascript?
provided:
<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've edited the requirements in the list above.
Why are there so many requirements? Well, the problem is that the image that will be displayed inside the hexagon is being provided by a backend where the user can upload images (which will most likely be either in .jpg or .png format). The backend will provide these images in the html-construct as follows:
<img src="somepath/examplepic.png" alt="something">
Especially this part has made it way more difficult than I first had thought. Many solutions to this problem included the css-style
background-image: url("somepath/examplepic.png");
which doesn't work as the backend will provide the picture as stated above. Inline-styling is forbidden by my boss.
The svg-approach doesn't work either because if you want an image that is cut to a shape you have to use
<image xlink:href="lalala/lala.png" width="a" height="b" />
inside the <svg>-element which doesn't work either because it's not an <img>-element.
So you see these requirements aren't being made by me because I want to make it complicated but due to the environment I'm working with and in.
