Can I replicate this image using only html and css - specifically the shape and edges?

Question

I'd like to replicate the image below using only html and css if possible. I'd like to use this as a "badge" with changing icons and colors. A static image won't work for me:

All seems doable, but I do not know how to replicate the actual shape of the badge itself (the green part). Is there a particular css directive I need to look into to achieve this?

EDIT: Appears a "Duplicate Question" concern was raised. Please note the linked to question does NOT include an image or text in the center of the hexagon, this one does. This adds a bit of complexity to the problem, and thus the new question. Based on the answers in this question, I was able to formulate a better google search and came across a codepen that worked beautifully for me. I vote for re-opening the question.

Because the original question states "only html and css if possible". — Nathaniel Flick, Nov 27 '16 at 21:21
@NathanielFlick original questions usually don't know more than.. what they already know. An OP aware of SVG would probably state that. — Roko C. Buljan, Nov 27 '16 at 21:22
But we always want to answer the question, not make assumptions? — Nathaniel Flick, Nov 27 '16 at 21:23
@NathanielFlick ofc... an answer encompassing both techniques would attract my attention for sure. — Roko C. Buljan, Nov 27 '16 at 21:23
both awesome answers so far! correct - didn't even know SVG was an option. One subtle thing is the "roundness" on the points of the original badge. The two current answers are very hard points. Is there a way to "round them off" a little bit like the green badge? — Source Matters, Nov 27 '16 at 21:23
You are definitely better off with svg if you want rounded edges since shapes in css have to do with angles/squared edges. @SourceMatters — Nathaniel Flick, Nov 27 '16 at 21:24
@RokoC.Buljan Not sure where the line of thinking ends, though. There's at least 3 ways to skin any cat on the web, but I see what you're saying. — Nathaniel Flick, Nov 27 '16 at 21:25

Baezid Mostafa · Accepted Answer · 2016-11-27T21:27:59.303

4

Yes possible. But its better if you use SVG. Here is an example with rounded corner

body{margin:0;}
.hexagon {
    width: 120px;
    height: 60px;
    position: relative;
    margin:50px 10px;
}
.hexagon, .hexagon:before, .hexagon:after {
    background: green;
    border-radius: 5px  
}
.hexagon:before, .hexagon:after {
    content: "";
    position: absolute;
    left: 23px;
    width: 74px;
    height: 70px;
    -moz-transform: rotate(145deg) skew(22.5deg);
    -webkit-transform: rotate(145deg) skew(22.5deg);
    transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
    top: -35px;
}
.hexagon:after {
    top: 35px;
}
.hexagon span {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 70px;
    background:green;
    z-index: 1;
}

 <div class="hexagon"><span></span></div>

edited Nov 27 '16 at 21:27

answered Nov 27 '16 at 21:18

Baezid Mostafa

2,680
2
14
26

1

I like how you are pushing skew to get some rounding! It doesn't happen on all corners evenly (in FF), but I hadn't considered that. – Nathaniel Flick Nov 27 '16 at 21:29
@NathanielFlick I know all the corner is not rounded .. I also don't consider using css to make it . :P SVG is more easier. My previous answer was same as your one So I edit my answer :) – Baezid Mostafa Nov 27 '16 at 21:42

score 3 · Answer 2 · answered Nov 27 '16 at 21:16

CSS Tricks has a great page on shapes, more here, and here's how I'd accomplish what you want, instead of the text I have in the shape div, replace with your icon font of choice and its html and css (ignore the margin-top I added to the hexagon, it's only there so you can see the whole thing:

#hexagon { width: 100px; height: 55px; background: red; position: relative; margin-top: 3em; line-height: 55px; text-align: center; color: white;} 

#hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } 

#hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }

<div id="hexagon">X THING</div>

You're very welcome! I've found it useful many times. While I love SVG I still favour getting it done with html and css first before adding it in. It's still more complex code with more chance of incorrect export and coming up with feature bloat and some small issues. — Nathaniel Flick, Nov 27 '16 at 21:26

Can I replicate this image using only html and css - specifically the shape and edges?

2 Answers2