爲此「形狀」添加邊框

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>