create css hexagon “badge”

Question

I'm trying to create a badge, containing a hexagon with a number in it. The badge/list-item itself would contain some info/name.

this is what I have so far:

 .item { display: block; background-color: blue; } .item > span { color: white; display: inline-block; } .hexagon { position: relative; width: 65px; height: 65px; line-height: 65px; text-align: center; color: white; } .hexagon span { position: absolute; color: white; z-index: 2; left: 30; } .hexagon:before { color: #ef473a; position: absolute; content: "\\2B22"; font-size: 65px; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; } 

 <div class="item"> <div class="hexagon"><span>1</span></div> <span class="title">TEST test</span> <!-- maximum width? > new line --> <span class="info">something darkside</span> </div> 

This is what I'm trying to achieve:

As you can see, the "blue" background should only start at the tip of the hexagon. Width and height of it, aren't going to change. So now I'm wondering whether it would be easier to use an image or if someone could help me recreate the image, would be fine too :)

Thanks in advance!

Answer 1

Try the flexbox way, it's made for your case since you have three items (medal, title, description) that you want to have vertically aligned in the middle next to each other.

Below is a starting point, you can probably extend that to your needs by yourself.

Please note that I also changed the way the hexagon is created, it's not using an UTF8 character now but simply colored borders. This gives you more control about the size of the actual hexagon shaped medal.

Standing on one of its tips, the height of this hexagon is equivalent with its diameter (d) which in turn is twice as long as one of the six lines (s) forming the hexagon. The width (w) of this hexagon is then: s * sqrt(3) or .5 * d * sqrt(3) .

 .badge { height: 64px; margin-left: 35px; color: white; font-family: sans-serif; background: blue; border: 1px solid transparent; display: flex; align-item: middle; } .medal { position: relative; margin-left: -30px; min-width: 75px; } .count { position: absolute; width: 58px; text-align: center; line-height: 64px; font-size: 30px; top: -16.74px; } h3 { max-width: 40%; margin-right: 30px; font-size: 14px; } p { font-size: .875em; } .hexagon { position: relative; width: 58px; height: 33.49px; background-color: #ff2600; margin: 14.74px 0 16.74px 0; } .hexagon:before, .hexagon:after { content: ""; position: absolute; width: 0; border-left: 29px solid transparent; border-right: 29px solid transparent; } .hexagon:before { bottom: 100%; border-bottom: 16.74px solid #ff2600; } .hexagon:after { top: 100%; width: 0; border-top: 16.74px solid #ff2600; } 

 <div class="badge"> <div class="medal"> <div class="hexagon"> <div class="count">1</div> </div> </div> <h3>The HEXAGON Badge Quest</h3> <p>You successfully posted a valid question on Stack Overflow and received an answer.</p> </div> 

Answer 2

Try the following. I haven't tested on mobile. Just chrome at this point, but it should get you close. You'll need to play around with the text somewhat to handle the wrapping and sizing inside the blue bar, but your question was in regards to the badge. The corner effects are clipping the shape by about 10px. So setting a fixed height on the bar and a 10px taller height on the hexagon did the trick. Then just some positioning and margin to move things into position. Good luck.

 .item { display: block; background-color: blue; height: 66px; position: relative; left: 35px; width: 100%; } .item > span { color: white; display: inline-block; } .hexagon { display: inline-block; position: relative; width: 66px; height: 66px; line-height: 66px; text-align: center; color: white; top: 0; left: -35px; } .hexagon span { position: absolute; color: white; z-index: 2; width: 66px; height: 66px; line-height: 66px; text-align:center; left: -0; } .hexagon:before { color: #ef473a; position: absolute; content: "\\2B22"; font-size: 76px; z-index: 1; width: 66px; height: 66px; left: 0; top: -5px; } .title { position: absolute; font-size: 1.75rem; top: 12px; left: 33px; margin: 0; text-align:center; display:block; height: 66px; width: 20%; line-height: 18px; } .info { position: absolute; top: 0px; left: 20%; margin: 0; text-align:center; display:block; height: 66px; width: 70%; line-height: 66px; vertical-align: center; } 

 <div class="item"> <div class="hexagon"><span>1</span></div> <span class="title">TEST test</span> <!-- maximum width? > new line --> <span class="info">something darkside</span> </div>