Goowik Goowik - 2 months ago 23
HTML Question

create css hexagon "badge"

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:

enter image description here

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

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>