如何使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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您可以区分边框和背景，使所有内容都具有相同的背景颜色，如第一个示例中所示。然后做border: 12px dotted white

当然，如果您不希望右侧包含在边框中，请执行border-top然后border-right等等