如何使響應六邊形6首8個三角形

Question

我發現一個代碼在codepen這樣，這裏是鏈接：https://codepen.io/FStop/pen/uvenj

如何與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代碼...我不能粘貼在這裏...它很難在這裏問

Answer 1

您的意思是如何使八個三角形這些六個些什麼呢？ 如果你的意思是隻需添加兩個div元素與「三角形」類並玩弄數字。 rotation必須是45deg，因爲您現在有八個三角形（360：8），並且width必須與您現在具有的三角形數相符。 周圍有點打後，我得到了以下解決方案：

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> 

CSS：

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

codePen Example