wie reagiert Sechseck mit 6 und 8 Dreiecken

Question

Ich habe bei einem Code zu machen, wie diese codepen und hier ist der Link: https://codepen.io/FStop/pen/uvenj

, wie dies machen mit 6 und 8 Dreiecken?

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

Sie können CSS-Code auf codepen Link ... Ich konnte nicht hier einfügen ... seine sehr schwer, etwas hier

Answer 1

fragen

Meinen Sie wie acht Dreiecken aus diesen sechs zu machen? Wenn Sie meinen, dass fügen Sie einfach zwei div Elemente mit der Klasse "Dreieck" hinzu und spielen Sie mit den Zahlen herum. Die rotation muss 45deg sein, denn Sie haben jetzt acht Dreiecke (360: 8) und die width muss mit der Anzahl der Dreiecke übereinstimmen, die Sie jetzt haben. Nach ein wenig herum zu spielen habe ich folgende Lösung:

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