Блог

Я не эксперт в 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> 

Не уверен, насколько большим вы хотите, чтобы шестиугольник был, но это должно дать вам хорошую отправную точку.

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;
}