1

I want to keep uploaded image inside a hexagonal frame. I generated css from this website and it works fine in some browser.

Code:

.frame-1 {
  width: 300px;
  height: 320px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 98%, 0% 75%, 0% 25%);
}

But, It don't work on some other major browser like firefox etc.

So, I tried to use a transparent background shaped image over the main image. But, I cannot make it working!

Code:

<div class="frame-2">
  <img src="image.jpg">
  <div class="mask"></div>
</div> 

.frame-2 {
  width: 300px;
  height: 320px;
  position: relative;
}
.mask {
  background: url('http://i.imgur.com/M40TJ9Z.png') no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

What is the best way to make it which supports all the major browsers? Thanks in advance.

Fiddle Work Demo

user1896653
  • 3,247
  • 14
  • 49
  • 93
  • Cross browser hexagons with an image fill are not easy to create with CSS. For FF support, you could use inline SVG like in this answer - http://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline/31919429#31919429 – Harry Apr 21 '16 at 17:35
  • 2
    Or you could refer to this beautiful answer by web-tiki - http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons It is a lot more complex than using clip-path or SVG but that is your best bet for doing this cross browser with CSS. – Harry Apr 21 '16 at 17:37
  • Are there any polyfills available / have you tried any? – P3t3r6 Apr 21 '16 at 17:39
  • sorry, don't understand your question @P3t3r6 what's polyfills? – user1896653 Apr 21 '16 at 17:52
  • mix-blend-mode could be an hint too : http://codepen.io/gc-nomade/pen/oxMbqv (but IE still fails at this time ) where others answers pointed by harry works – G-Cyrillus Apr 21 '16 at 18:44
  • > "A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will." [source](https://remysharp.com/2010/10/08/what-is-a-polyfill) I didn't spend too much time searching, but I only found [this one](https://github.com/AlfonsoFilho/ClipPath). I haven't tested, and it is 2 years old, but still ... give it a try, might solve it – P3t3r6 Apr 21 '16 at 21:05
  • @P3t3r6, it didn't help :( https://jsfiddle.net/learner73/1Le90v10/4/ – user1896653 Apr 24 '16 at 19:20

0 Answers0