html - 给这个 "shape"添加边框

Question

我需要为这个“形状”添加边框。这有点困难，因为形状是用 after 和 before 伪元素制作的。我找不到正确的方法。

我需要达到的目标:

我目前的代码:

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

这是我的解决方案。不需要纯色背景。这可能适合也可能不适合您的实际用例。

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(
    		45deg,
	    	#0e0 calc(50% - 150px + 10px), transparent 0,
    		transparent calc(50% + 150px - 10px), #0e0 0%),
    	linear-gradient(
    		-45deg,
    		#0e0 calc(50% - 100px + 10px), transparent 0,
    		transparent calc(50% + 100px - 10px), #0e0 0);
    box-shadow: 0 0 0 10px #0e0 inset;
}

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