创建css六边形“徽章”

Question

我正在尝试创建一个徽章，其中包含一个带有数字的六边形。徽章/列表项本身将包含一些信息/名称。

这是我到目前为止所拥有的：

.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>

这就是我想要实现的目标：

如您所见，“蓝色”背景应仅从六边形的尖端开始。它的宽度和高度不会改变。所以现在我想知道使用图像是否更容易，或者有人可以帮我重新创建图像，也可以。）

提前致谢！

Answer 1

尝试使用flexbox方式，它是针对您的情况制作的，因为您有三个项目（奖牌，标题，描述），您想要在中间彼此相邻的垂直对齐。

以下是一个起点，您可以自己将其扩展到您的需求。

请注意，我也改变了六边形的创建方式，它现在不使用UTF8字符，只是简单的彩色边框。这使您可以更好地控制实际六边形奖牌的大小。

站在其中一个尖端上，该六边形的高度等于其直径（d），而直径（d）又是形成六边形的六条线之一的两倍。然后，此六边形的宽度（w）为：s * sqrt(3)或.5 * d * sqrt(3)。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试以下方法。我没有在手机上测试过。在这一点上只是镀铬，但它应该让你接近。您需要稍微处理文本以处理蓝色条内的包装和尺寸，但您的问题与徽章有关。角落效果将形状剪裁约10px。因此，在杆上设置固定高度，在六边形上设置10px更高的高度就可以了。然后只是一些定位和边距将事物移动到位。祝你好运。

.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>