Hexagon + Border-radius + Background-image, how can i do this?

Question

i have a question for u. For example i got this picture, and need to do background image width box-shadow (yellow) on It with photo of someone (doesn't matter). How can i do it right?

*Updated Image!

http://stackoverflow.com/questions/36828769/make-hexagon-shape-with-border-rounded-corners-and-transparent-background — Nenad Vracar, Apr 30 '16 at 10:16
how about Photo Background with ::before and ::after? And i saw your realization. — codezavr, Apr 30 '16 at 10:29

score 2 · Answer 1 · answered Apr 30 '16 at 10:31

A task like this is best achieved with SVG, as it allows you to define complex shapes.

<svg viewBox="0 0 120 100" style="width:120px;height:100px">
  <defs>
    <clipPath id="hexagon_clip">
      <path id="hexagon" d="M38,2 
           L82,2 
           A12,12 0 0,1 94,10 
           L112,44 
           A12,12 0 0,1 112,56
           L94,90       
           A12,12 0 0,1 82,98
           L38,98
           A12,12 0 0,1 26,90
           L8,56
           A12,12 0 0,1 8,44
           L26,10
           A12,12 0 0,1 38,2" />
      <!-- SVG Hexagon path from http://stackoverflow.com/a/36842587/507674 -->
    </clipPath>
  </defs>
  <image xlink:href="http://placehold.it/120x100" x="0" y="0" width="120px" height="100px" clip-path="url(#hexagon_clip)" />
  <use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="5" fill="transparent" />
</svg>

What happens here is that a clipping path is defined for the hexagon, then applied to the image. Finally, the hexagon is drawn again over the top to make the border.

Thx. But I see this: http://i.imgur.com/29ERbF6.png - It's cause in body i have style - Color: #333 What's wrong with it? — codezavr, Apr 30 '16 at 10:41
I fount my omission - * transition: all 0.3s (deleting this solve the problem) — codezavr, Apr 30 '16 at 11:02

Hexagon + Border-radius + Background-image, how can i do this?

1 Answers1