9

このような六角形は、純粋な CSS3 で作成できますか?

ここに画像の説明を入力

助けてくれてありがとう!

4

6 に答える 6

2

この scss-mixin を使用して、境界線のある六角形を作成できます。任意のサイズまたは色の六角形を作成します。

HTML マークアップ:

<div class="hex-holder">
     <div class="hex"></div>
     <div class="hex-content"></div>  (<-- optional) 
</div>

1) 簡単な方法:

div.hex-holder{
    @import hexagon($width, $color, $rotation, $border, $radius)
}

どこ:

  • 幅 = 六角形の幅
  • color = 境界線の色
  • 回転=回転
  • ボーダー = ボーダーの幅
  • radius = border-radius (角を少し丸めます)

    @mixin($width: 140px $color: black, $rotation: 0, $border: 3px, $radius: 10px){
    
    $height: $width * tan(60deg) - $border*2 - $radius/2;      
    $naturaldiameter: $width + 2 * cos(60deg);
    position: relative;
    
    div.hex {
        transform: rotate($rotation + deg);
        width: $width;
        height: $height;
        border-radius: $radius;
        position: relative;
        @include content-box();
        border-top: $border solid $color;
        border-bottom: $border solid $color;
        margin: auto;
    
        div.hex-content{
            max-width: $height;
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            top: 0;
            transform: rotate(-1*$rotation+deg);
        }
    }
    
    div.hex::after, div.hex::before{
        content: "";
        margin-top: $border * -1;
        transform: rotate(-60deg);
        display: block;
        position: absolute;
        border-top: $border solid $color;
        border-bottom: $border solid $color;
        width: $width;
        height: $height;
        border-radius: $radius;
    }
    
    div.hex::before{
        transform: rotate(60deg);
    }}
    

2) 高度な方法: - これは、六角形のサイズや色が変わる場合に適しています。プロパティの一部のみを変更できます(例:画面サイズが変更された場合のhex_size)

div.hex-holder{
    @include hex_basics(30);
    @include hex_color($bordercolor1, $backgroundcolor1);
    @include hex_size($width1, $borderwidth1, $borderradius1);

     &:hover{
        @include hex_color($bordercolor2, $backgroundcolor2);
     }

     @media( query ){
         @include hex_size($width2, $borderwidth2, $borderradius2);
     }
}




@mixin hex_basics($rotation: 0){
    position: relative;

    div.hex{
        transform: rotate($rotation + deg);
        position: relative;
        @include content-box();
        margin: auto;
        border-top-style: solid;
        border-bottom-style: solid;
    }

    div.hex-content{
        position: absolute;
        z-index: 2;
        border-radius: 40%;
        width: 100%;
        height: 100%;
        top: 0;
        display: block;
    }
    div.hex::after, div.hex::before{
        content: "";
        transform: rotate(-60deg);
        display: block;
        position: absolute;
        border-top-style: solid;
        border-bottom-style: solid;
    }
    div.hex::before{
        transform: rotate(60deg);
    }
}

@mixin hex_size($width: 140px, $border-width: 3px, $radius: 10px){
    $height: $width * tan(60deg) - $border-width *2 - $radius/2;
    $naturaldiameter: $width + 2 * cos(60deg);

    div.hex::after, div.hex::before, div.hex{
        margin-top: $border-width * -1;
        border-top-width: $border-width;
        border-bottom-width: $border-width;
        width: $width;
        height: $height;
        border-radius: $radius;
    }
}

@mixin hex_color($border-color: black, $background-color: white){
    div.hex::after, div.hex::before, div.hex{
        border-top-color: $border-color;
        border-bottom-color: $border-color;
        background-color: $background-color;
    }
}

注:div.hex-contentプロパティが整列されていない可能性がありますtop。プロパティを設定して修正できます。

于 2016-09-08T04:26:51.073 に答える