Css 如何使用6和8个三角形制作响应性六边形

我在codepen上找到了这样的代码，下面是链接：

如何用6个和8个三角形制作这个

<div class="hexagon">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>

---

你可以在codepen链接上看到css代码…我无法粘贴到这里…这里很难问一些问题

你的意思是如何在这六个三角形中生成八个三角形？ 在这种情况下，您的意思是只需在类“triangle”中再添加两个div元素，并处理数字。

旋转

必须为

45度

，因为您现在有八个三角形（360:8），并且

宽度

必须与您现在拥有的三角形数量相匹配。 在玩了一会儿之后，我得到了以下解决方案：

HTML:

<div class="hexagon">
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>

body{
  padding: 25px;
}

@mixin hexagon($width: 100px, $color: #19c, $dir: down){
  // Math for calculating the height of equilateral triangle
  // Rounding this up helps a little with sub pixel rendering BS
  $height: ceil($width*(sqrt(3))/2);
  height: $height;
  width: $width;
  position: relative;
  // might as well center the thing
  margin: 0 auto;
  transform-origin: 0 0;
  transform: translateX($width/2) rotate(30deg);
  .triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $height/3 $width/8.5 0;
    border-color: #19c transparent;
    transform-origin: $width/8.5 $height/3 + 2;
    // Sass function to auto generate rotation
    $deg: 45deg;
    @for $i from 1 through 7{
      &:nth-child(#{$i}){
        transform: rotate(#{$deg});
      }
      $deg: $deg + 45;
    }
    &:nth-child(5), &:nth-child(6){
      border-color: lighten(#19c,25%) transparent;
    }
    &:nth-child(2), &:nth-child(3){
      border-color: darken(#19c,10%) transparent;
    }
  }
}

.hexagon{
  @include hexagon(300px);
}