为这个“形状”添加边框

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

嗯，这是我能想到的用纯 CSS 处理它的唯一方法：

这里是 JSfiddle：https://jsfiddle.net/xfcjfz3d/7/

body {
    background:#fff;
}

#octagon {
  position:relative;
	width: 300px;
	height: 200px;
	background: green;
	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 green;
	border-left: 30px solid #fff;
	border-right: 30px solid #fff;
}

#octagon:after {
	bottom: 0;
	border-top: 30px solid green;
	border-left: 30px solid #fff;
	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(
    		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>