html - 我怎样才能使 Css Shape 像第一张图片一样

Question

我使用 CSS border-left 和 border-right 以及 border-top 属性做了第二个，代码如下。

现在我只想像第一张图片一样制作带边框的形状。

.team-social-icons a {
    background: #3C4E62;
    display: inline-block;
    width: 30px;
    height: 20px;
    color: #fff;
    position: relative;
}

.team-social-icons a:before {
    position: absolute;
    left: 0;
    top: -8px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 8px solid #3C4E62;
    content: "";
}
.team-social-icons a:after {
    position: absolute;
    left: 0;
    bottom: -8px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 8px solid #3C4E62;
    content: "";
}

Answer 1

一个六边形可以由三个矩形构成，每个矩形都有左右边框(但没有上下边框)，每个矩形都旋转 60 度。这可以通过一个 :before 和 :after 方便地完成。

要使内容居中，您可以将 flex 与 align-items/justify-content 一起使用。

.hexagon {
  display: inline-block;
  width: 120px;
  height: 69px;
  border-left: 1px solid black;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 42px;
}
.hexagon:before, .hexagon:after {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-left: 1px dashed black;
  border-right: 1px dashed black;
}
.hexagon:before {transform:rotate(60deg);}
.hexagon:after {transform:rotate(-60deg);}

<div class="hexagon"><b>1234</b>happy people</div>