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!

@RobertWade The issue here is it would be used for a mobile app in combination with PhoneGap. Most older versions for android don't support SVG. — Goowik
– Goowik, Commented Sep 9, 2016 at 11:03

Paul · Accepted Answer · 2016-09-09 11:28:53Z

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>

Robert Wade · Accepted Answer · 2016-09-09 11:16:47Z

1

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>

edited Sep 9, 2016 at 11:16

answered Sep 9, 2016 at 11:08

Robert Wade

5,0231 gold badge20 silver badges37 bronze badges

3 Comments

Goowik Over a year ago

Thanks for trying! Although @Paul 's answer is closer :)

Robert Wade Over a year ago

Hey no problem. Just curious though, I know you had some issues with older Android browsers. As I understand, they have problems with flex box. What's your experience with that solution and your old Android browsers?

Goowik Over a year ago

By the use of Phonegap. Apparently it supports older ones (I still haven't had the time of testing them though). docs.phonegap.com/en/2.3.0/… As Phonegap uses an in-app webkit browser. So you could be using flex display and such.

Collectives™ on Stack Overflow

create css hexagon "badge"

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related