0

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:

enter image description here

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.

Improve this question
8
  • 2
    Why not simply use SVG? Commented Nov 27, 2016 at 21:09
  • Because the original question states "only html and css if possible". Commented Nov 27, 2016 at 21:21
  • 2
    @NathanielFlick original questions usually don't know more than.. what they already know. An OP aware of SVG would probably state that. Commented Nov 27, 2016 at 21:22
  • But we always want to answer the question, not make assumptions? Commented Nov 27, 2016 at 21:23
  • 1
    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? Commented Nov 27, 2016 at 21:23

2 Answers 2

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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.
@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 :)
3

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>

Improve this answer

2 Comments

rep for the link! awesome page.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.