我怎样才能把一个八角形放在这个八角形的html里面呢？

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

#octagon {
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotate(45deg);
  background-color: #f00; /* 设置八角形的背景颜色 */
}

#octagon:before,
#octagon:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000; /* 设置八角形的边框样式 */
}

#octagon:before {
  top: -2px;
  left: 0;
  border-top: none;
  border-bottom: none;
}

#octagon:after {
  bottom: -2px;
  left: 0;
  border-bottom: none;
  border-top: none;
}

<style>
  /* 上述CSS代码 */
</style>

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