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

Question

我不是 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, 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>

Answer 1

不确定您希望六边形有多大，但这应该给您一个很好的起点。

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, 0);
}

.octagontwo {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  overflow: hidden;
  transform: rotate(45deg);
  background: rgb(255, 255, 255);
  border: 3px solid rgb(0, 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;
}

.octagontwo: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: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  transform: rotate(45deg);
  content: '';
  border: inherit;
}

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

How can I put an octagon inside of this octagon html

html

css

shapes

web