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

Question

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

这是一个 JS FIDDLE

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

原文由 Patrick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以修改自己的代码来使用它。 Right now, you have rules for .octagon that should be for .octagon-wrapper , and rules for .octagon::before that should be for .octagon .只需移动 CSS 规则并将它们应用于它们的父级，同时更改 border 属性 .octagon::before 继承自 .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>

原文由 jperezov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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>

原文由 Persijn 发布，翻译遵循 CC BY-SA 3.0 许可协议