html - 如何为 CSS 八 Angular 形提供完整边框？

我正在尝试使用这个 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;
        }

最佳答案

您可以修改自己的代码来处理此问题。现在，您的 .octagon 规则应该用于 .octagon-wrapper ，而 .octagon::before 规则应该用于 .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>

关于html - 如何为 CSS 八 Angular 形提供完整边框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34641588/