Two hexagon borders around image (responsive)

Question

Iam trying to make a double hexagon border around my image. Here is my fiddle, which didnt come far:

code:

    <div class="hex">
    <div class="hex inner">
        <div class="hex inner2">

          <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"/>
        </div>
    </div>
</div>

    .hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #000;
    position: relative;
}
.hex:before, .hex:after {
    content:"";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}
.hex:before {
    top: -59px;
    border-bottom: 60px solid #000;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #000;
}
.hex.inner {
    background-color:blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}
.hex.inner2 {
    background-color:red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}

so i want the image to be where the red hexagon is, basically the image should be inside and "clipped" to a hexagon and then i want a blue and a black border around it which is about 2px each. And the second issue is that i want to make it responsive. Hope anyone can help me achieve this.

I found a good partial solution here https://stackoverflow.com/questions/34240589/hexagon-with-border-and-image/34263694#34263694 but i would need to add another hexagonal border aorund the current — mheonyae, Aug 02 '17 at 20:38

score 0 · Answer 1 · answered Aug 02 '17 at 19:58

0

The CSS property of clip-path should be able to provide you with the functionality you are looking for natively, particularly the polygon option. You can define custom shapes for clipping, including a hexagon, and provides a high level of customization. Here's a link for more info on this: css-tricks clip-path

answered Aug 02 '17 at 19:58

Drake Perrior-Small

1
4

Yeah, but the problem is with responsiveness – mheonyae Aug 02 '17 at 20:04
You are going to have to be more specific about what you mean by responsiveness. – Drake Perrior-Small Aug 02 '17 at 20:06
i am planning to place the hexagon in a div that will be 25% of page width. I need the hexagon the scale as the page size scales on different screen sizes or window resize – mheonyae Aug 02 '17 at 20:10
Something like this: https://stackoverflow.com/questions/34240589/hexagon-with-border-and-image/34263694#34263694 but i need two borders around it like this teal one - i want a blue and a black one – mheonyae Aug 02 '17 at 20:40

Two hexagon borders around image (responsive)

1 Answers1