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

如何解决我怎样才能在这个八角形html里面放一个八角形

我不是 html 专家，所以这就是我问这个问题的原因，所以我可以创建一个六边形，但我需要在创建的六边形内创建另一个，所以这就是我问的原因如果你们中的任何人可以帮助我，在此先感谢！

.octagonWrap {
  width: 400px;
  height: 400px;
  float: left;
  position: absolute;
  overflow: hidden;
  top: 30%;
  left: 20%;
}

.octagon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transform: rotate(45deg);
  background: rgb(255,255,255);
  border: 3px solid rgb(0,0);
}

.octagon:before {
  position: absolute;
  /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,* but if the border were 5px,then it'd be -5px.
     */
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  transform: rotate(45deg);
  content: '';
  border: inherit;
}

<div class='octagonWrap'>
  <div class='octagon'></div>
  <div class="octagontwo"></div>
</div>

解决方法

不确定你想要多大的六边形，但这应该给你一个很好的起点。

HTML

<div class='octagonWrap'>
  <div class='octagon'></div>
</div>
<div class='octagonWrapTwo'>
  <div class='octagontwo'></div>
</div>

CSS

.octagonWrap {
  width: 400px;
  height: 400px;
  float: left;
  position: absolute;
  overflow: hidden;
  top: 30%;
  left: 20%;
}

.octagonWrapTwo {
  width: 300px;
  height: 300px;
  float: left;
  position: absolute;
  overflow: hidden;
  top: 45%;
  left: 24%;
}

.octagon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transform: rotate(45deg);
  background: rgb(255,255,255);
  border: 3px solid rgb(0,0);
}

.octagontwo {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  overflow: hidden;
  transform: rotate(45deg);
  background: rgb(255,0);
}

.octagon:before {
  position: absolute;
  /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,* but if the border were 5px,then it'd be -5px.
     */
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  transform: rotate(45deg);
  content: '';
  border: inherit;
}

.octagontwo:before {
  position: absolute;
  /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,then it'd be -5px.
     */
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  transform: rotate(45deg);
  content: '';
  border: inherit;
}