How to create a rounded hexagon with background image?

Question

I've searched through the net and could not find any proper solution. I need to know if there's a solution to make a hexagon with rounded corners and insert a background image into that hexagon so it fills it up entirely. In case if there's no way to make fully with CSS3, is there a way to do so by using background images? For instance, I have this rounded hexagon as a background image:

    .staff_hexagon {
    position: relative;
    display: block;
    height: 200px;
    width: 100%;
    background: url('../img/staff_hexo.png') center center no-repeat;
    background-size: contain;
    overflow: hidden;
    }

Is there a way to put a background image inside the above-mentioned hexagon? Thanks!

Use SVG like in this answer - http://stackoverflow.com/questions/36828769/make-hexagon-shape-with-border-rounded-corners-and-transparent-background/36842587#36842587 and then apply the image as `fill` to it. Downvote wasn't mine. — Harry, Jan 20 '17 at 11:47
@Harry I appreciate your reply. I just don't get how this `fill` works. I've used an *.svg hexagon and applied this hexagon as a background image. I've downloaded a rounded hexagon in .svg format from [here](http://flaticon.com). However, I just can't get how to apply a background image to it. I can change its color when I change the `fill`'s hex value, but can't get what's the right way of applying a background image to it. Is there a more dynamic solution, so an end user (with no technical background) could easily change the background image if he wanted to? — Balabeque, Jan 20 '17 at 13:39
This thread should help you - http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image. That's the only way I know to add an image fill to an SVG shape. — Harry, Jan 20 '17 at 14:05

score 2 · Answer 1 · answered Jan 20 '17 at 21:15

Just in case you want a non-svg option, here is a complicated and not quite good-looking posibility

The rounding of the corners can be somewhat adjusted playing with composite radius

.container {
  width: 300px;
  height: calc(300px * 0.5714);
  margin: 80px;
  position: relative;
}
.frame {
  width: 100%;
  height: 100%;
  border-radius: 30px / 90px;
  position: absolute;
  overflow: hidden;
}
.r {
  transform: rotate(60deg);
}
.l {
  transform: rotate(-60deg);
}
.inner {
  width: 100%;
  height: 190%;
  top: -45%;
  position: relative;
  background-image: url(http://lorempixel.com/800/600);
  background-size: 190%;
  background-position: center center;
  background-repeat: no-repeat;
}
.r .inner {
  transform: rotate(-60deg);
}
.l .inner {
  transform: rotate(60deg);
}

<div class="container">
  <div class="frame h">
    <div class="inner"></div>
  </div>
  <div class="frame r">
    <div class="inner"></div>
  </div>
  <div class="frame l">
    <div class="inner"></div>
  </div>
</div>

Looks kind of more rounded than normal but a very nice attempt and answer :) — Harry, Jan 23 '17 at 06:40

Serg Chernata · Answer 2 · 2017-01-20T16:11:59.410

1

I think you're looking for clip-path property. It can use generated shapes or external svg.

div.test {
    background: url(http://lorempixel.com/output/cats-q-c-200-200-5.jpg) no-repeat 50% 50%;
    background-size: cover;
    -webkit-clip-path: url(#myClip);
    clip-path: url(#myClip);
    width: 200px;
    height: 200px;
}

<div class="test">
  
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
      <polygon points=".41,.02 .59,.02 
                       .91,.16 1,.33 
                       1,.66 .91,.83 
                       .59,.98 .41,.98 
                       .09,.83 0,.66
                       0,.33 .09,.16
                       " 
               />      
      
      <circle cx=".5" cy=".2" r=".2" /> <!-- top -->
      <circle cx=".5" cy=".8" r=".2" /> <!-- bottom -->
      <circle cx=".8" cy=".33" r=".2" /> <!-- right top -->
      <circle cx=".8" cy=".66" r=".2" /> <!-- right bottom -->
      <circle cx=".2" cy=".33" r=".2" /> <!-- left top -->
      <circle cx=".2" cy=".66" r=".2" /> <!-- left bottom -->
    </clipPath>
  </defs>
</svg>

edited Jan 20 '17 at 16:11

answered Jan 20 '17 at 14:41

Serg Chernata

12,280
6
32
50

He is looking for a *rounded* hexagon. That'd be tough (if not impossible) with CSS `clip-path`. – Harry Jan 20 '17 at 14:43
It can be loaded as internal or external svg. – Serg Chernata Jan 20 '17 at 14:44
I'm not saying that it is not possible with SVG. I'm just saying a pure CSS version is not possible. Your current demo might be a bit misleading in that aspect but I'd leave it to the OP to decide. Cheers :) – Harry Jan 20 '17 at 14:45
Did you see the part of his question that starts with: "In case if there's no way..."? :P – Serg Chernata Jan 20 '17 at 14:46
You aren't getting the point. I am not saying your answer is wrong, I am not saying it won't work with SVG either. I'm just saying your demo is a bit misleading because it uses pure CSS clip-path whereas this is mostly possible only with a clip-path that uses the `url(#..)` syntax (that is, when used with a SVG). To answer your question, yes I did read the line. Whether you want to see the point in this comment or not is upto you. – Harry Jan 20 '17 at 14:48
1

Let's agree to disagree ^_^ – Serg Chernata Jan 20 '17 at 14:51
Hey @SergChernata, thanks for your input. Sure, I'm aware of `clip-path` and have already used it in the project I'm working on. It's cool to make some sharp-edged shapes and/or skewed angles, but it sucks when it comes to rounded borders... – Balabeque Jan 20 '17 at 15:36
Updated my answer using an svg element. It's not perfect but this is what I was generally talking about from the start. You can plug in any other svg path within – Serg Chernata Jan 20 '17 at 16:12
@SergChernata: This is much better and this is what I was pointing to. That is, you needed to include an actual SVG clip-path demo. Anyway all good now :) (Just in case you or OP need a different `path` for the rounded hexagon, you can try using the one I included in my answer here - http://stackoverflow.com/questions/36828769/make-hexagon-shape-with-border-rounded-corners-and-transparent-background/36842587#36842587.) – Harry Jan 20 '17 at 16:25

How to create a rounded hexagon with background image?

2 Answers2