我怎样才能使 Css 形状像第一张图片

Question

我用 CSS border-left and border-right and 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

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

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

Answer 2

一个六边形可以用三个矩形构成，每个矩形都有左右边框（但没有上下边框），每个矩形都旋转 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>

我怎样才能使 Css 形状像第一张图片

how can I make Css Shape like the first image

html

css

css-shapes