为此“形状”添加边框

Question

我需要为此“形状”添加边框。这很难，因为和之前的伪元素的形状是由制成的。我找不到正确的方法。

我需要实现：

的代码，我到目前为止有：

https://jsfiddle.net/jimmyadaro/xfcjfz3d/

#octagon { 
    width: 300px; 
    height: 200px; 
    background: red; 
    position: relative; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    display: block; 
} 

#octagon:before, 
#octagon:after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

#octagon:before { 
    top: 0; 
    border-bottom: 30px solid red; 
    border-left: 30px solid #fff; 
    border-right: 30px solid #fff; 
} 

#octagon:after { 
    bottom: 0; 
    border-top: 30px solid red; 
    border-left: 30px solid #fff; 
    border-right: 30px solid #fff; 
} 

<div id="octagon"></div> 

我试着用阴影和没有成功的轮廓。

感谢您的阅读。

注：如果有问题，我将使用纯色背景色。

Answer 1

好了，这是我能想到的纯CSS接近它的唯一途径：

的jsfiddle这里：https://jsfiddle.net/xfcjfz3d/7/

body { 
 
    background:#fff; 
 
} 
 

 
#octagon { 
 
    position:relative; 
 
\t width: 300px; 
 
\t height: 200px; 
 
\t background: green; 
 
\t position: relative; 
 
\t -webkit-box-sizing: content-box; 
 
\t -moz-box-sizing: content-box; 
 
\t box-sizing: content-box; 
 
\t display: block; 
 
} 
 

 
#octagon:before, 
 
#octagon:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 

 
#octagon:before { 
 
\t top: 0; 
 
\t border-bottom: 30px solid green; 
 
\t border-left: 30px solid #fff; 
 
\t border-right: 30px solid #fff; 
 
} 
 

 
#octagon:after { 
 
\t bottom: 0; 
 
\t border-top: 30px solid green; 
 
\t border-left: 30px solid #fff; 
 
\t border-right: 30px solid #fff; 
 
} 
 

 
.tall { 
 
    position:absolute; 
 
    background:red; 
 
    width:230px; 
 
    height:190px; 
 
    left:35px; 
 
    top:5px; 
 
    z-index:1; 
 
} 
 

 
.wide { 
 
    position:absolute; 
 
    background:red; 
 
    width:290px; 
 
    height:130px; 
 
    left:5px; 
 
    top:35px; 
 
    z-index:1; 
 
} 
 

 
.corner { 
 
    position:absolute; 
 
    background:red; 
 
    width:45px; 
 
    height:43px; 
 
    
 
    z-index:1; 
 
    transform: rotate(45deg); 
 
} 
 

 
.topleft { 
 
    left:14px; 
 
    top:14px; 
 
} 
 

 
.topright { 
 
    //background:black; 
 
    left:241px; 
 
    top:13px; 
 
} 
 

 
.bottomleft { 
 
    background:red; 
 
    left:13px; 
 
    top:143px; 
 
} 
 

 
.bottomright { 
 
    background:red; 
 
    left:241px; 
 
    top:143px; 
 
}

<div id="octagon"> 
 
    <div class="tall"></div> 
 
    <div class="wide"></div> 
 
    <div class="corner topleft"></div> 
 
    <div class="corner topright"></div> 
 
    <div class="corner bottomleft"></div> 
 
    <div class="corner bottomright"></div> 
 
</div>

Answer 2

这里是我的解决方案。没有固定的背景颜色是必需的。这可能会或可能不适合您的实际使用情况。

JSFiddle

#octagon { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#octagon:before, 
 
#octagon:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 300px; 
 
    padding-top: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) rotate(45deg); 
 
    z-index: -1; 
 
} 
 
#octagon:before { 
 
    background: red; 
 
} 
 
#octagon:after { 
 
    background: 
 
     linear-gradient(
 
    \t \t 45deg, 
 
\t  \t #0e0 calc(50% - 150px + 10px), transparent 0, 
 
    \t \t transparent calc(50% + 150px - 10px), #0e0 0%), 
 
    \t linear-gradient(
 
    \t \t -45deg, 
 
    \t \t #0e0 calc(50% - 100px + 10px), transparent 0, 
 
    \t \t transparent calc(50% + 100px - 10px), #0e0 0); 
 
    box-shadow: 0 0 0 10px #0e0 inset; 
 
}

<div id="octagon">Hello World!</div>