如何给 CSS 八角形一个完整的边框？

Question

我正在尝试使用这个 css 八边形并给它一个实心的红色边框。但是，当我添加边框时，它只适用于形状的一部分。有人对此有解决方案吗？

HTML

<div class='octagonWrap'>
      <div class='octagon'></div>
  </div>

CSS

.octagonWrap{
        width:200px;
        height:200px;
        float: left;
        position: relative;
        }
    .octagon{
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: hidden;
        }
    .octagon:before {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        transform: rotate(45deg);
        background: #777;
        content: '';
        border: 3px solid red;
        }

Answer 1

想象一下那些红线一直延伸到彼此接触。那个正方形（旋转了 45%）有一个完整的边框，只是由于 overflow: hidden;

你看不到 "cut off" 个角

这似乎可行（但通过添加两个额外的 div 来实现，因此可能有更好的方法）：

<div class='octagonWrap'>
  <div class='octagon'></div>
  <div class='vert'> </div>
  <div class='hort'> </div>
</div>

然后添加tihs css:

.vert {
     position: absolute;
     left: 60px;
     border-top: 3px solid red;
     border-bottom: 3px solid red;
     height: 194px;
     width: 80px;
 }
 .hort {
     position: absolute;
     top: 60px;
     border-left: 3px solid red;
     border-right: 3px solid red;
     width: 94px;
     height: 80px;
 }

Answer 2

您可以使用 online calculator（或手动计算）来计算边长比和总高度所需的尺寸。

然后通过使用一些伪元素和一个 span 元素，您可以通过以下方式创建此形状：

.oct {
  height: 241px;
  width: 100px;
  background: none;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 10px solid tomato;
  border-bottom: 10px solid tomato;
  margin: 100px auto;
  transition: all 0.8s;
}
.oct:before,
.oct:after,
.oct span {
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  border: inherit;
  top: -10px;
  z-index:-1;
}
.oct:before {
  left: -100%;
  transform: rotate(-45deg);
  transform-origin: top right;
}
.oct:after {
  left: 100%;
  transform: rotate(45deg);
  transform-origin: top left;
}
.oct span {
  height: inherit;
  width: inherit;
  background: inherit;
  transform: rotate(90deg);
}
.oct:hover {
  transform: rotate(180deg);
}

<div class="oct">
  <span></span>
</div>

Answer 3

您可以修改自己的代码来使用它。现在，您有适用于 .octagon-wrapper 的 .octagon 规则，以及适用于 .octagon 的 .octagon::before 规则。只需移动 CSS 规则并将它们应用于它们的 parents，同时将 .octagon::before 的 border 属性更改为继承自 .octagon。

.octagonWrap {
    width:200px;
    height:200px;
    float: left;
    position: relative;
    overflow: hidden;
}
.octagon {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background: #777;
    border: 3px solid red;
}
.octagon:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,
     * but if the border were 5px, then it'd be -5px.
     */
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
}

<div class='octagonWrap'>
    <div class='octagon'></div>
</div>

Answer 4

您应该尝试使用 HTML5 canvas 元素。你应该可以 draw the polygon 然后给它加一笔。

Answer 5

SVG 解决方案

我不知道是否可以使用 svg，
如果是这里，那是多么简单。

<svg viewBox="0 0 75 75" width="200px">
  <path d="m5,22 18,-18 28,0 18,18 0,28 -18,18, -28,0 -18,-18z" stroke="red" stroke-width="2" fill="black" />
</svg>

Answer 6

您可以使用 clip-path

非常有效地做到这一点

.octagonWrap {
  background: red;
  width: 200px;
  height: 200px;
  position: absolute;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.octagon {
  position: relative;
  background: gray;
  width: 190px;
  height: 190px;
  top: 5px;
  left: 5px;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

<div class="octagonWrap">
  <div class='octagon'></div>
</div>

如何给 CSS 八角形一个完整的边框？

How do I give a CSS octagon shape a full border?

html

css

css-shapes

SVG 解决方案