CSSで六角形を描く

こんにちは、ヒラタケです。

いつだったか忘れたけど、「そのうちCSSだけで六角形を描く方法を説明します」的なことを言った気がするんですが、それをようやく、この記事でやりたいと思います。

六角形をCSSのみで

CSSで六角形を描けたからって特に何もないですし、SVGとか使ったほうが綺麗でファイルサイズも小さくなりそうなんですけど、そこには触れないようにしていただいてですね…

この記事では、「background-image」の「linear-gradient」を駆使して六角形を描いていく方法を説明します。これによって、わざわざspanとかdivとかをたくさん用意しなくても1つの要素だけで六角形を描くことができます。

実際に描いてみたものがこれです。

See the Pen CSS HEXAGON by Hiratake (@hiratake) on CodePen.dark

角度とかは微妙にズレているかもしれないですが、なんか六角形っぽいものが描けていると思います。CSSがある程度わかって、詳しいことはどうでもいいやって方はここで帰っちゃっても大丈夫です。ここからは、このコードの説明をしていきます。

六角形の解説

それでは説明をしていきます。

この六角形は、正方形のブロック要素の背景に描かれています。上の例では、「hexagon」というclassをつけたdiv要素のbefore擬似要素を正方形のブロック要素にして、その背景に六角形を描いています。別に擬似要素である必要はなく、正方形の要素で背景が指定できればこの方法で六角形を描くことができます。

上に貼ったコードでは、六角形の位置の調整のために色々書かれていますが、正方形の要素の背景に六角形を描いている部分は以下のところです。下のコードでは擬似要素ではなく普通の要素を指定しています。

.hexagon {
    background-color: #fff;
    background-image: 
        linear-gradient(-30deg, #3c3c3c, #3c3c3c 18.3%, transparent 18.3%, transparent 81.7%, #3c3c3c 81.7%, #3c3c3c),
        linear-gradient(30deg, #3c3c3c, #3c3c3c 18.3%, transparent 18.3%, transparent 81.7%, #3c3c3c 81.7%, #3c3c3c),
        linear-gradient(to right, #3c3c3c, #3c3c3c 6%, transparent 6%, transparent 94%, #3c3c3c 94%, #3c3c3c);
    background-size: 100% 100%;
}

六角形の色に塗りつぶしておいて、その上から六角形の形になるように枠を作っていく感じです。このコードについて1つずつ説明していきます。

背景の指定

2行めの「background-color」で背景の色を指定しています。ここで指定した色が六角形の色になります。

六角形の枠を描く

3~6行目の「background-image」で六角形の枠を描いています。「linear-gradient」は背景のグラデーションを作る際に用いられるものですが、それを上手く利用して作っていきます。

ここでは「linear-gradient」の解説はものすごく長くなりそうなので省略させていただきます。詳しく知りたい方は以下のようなページを参照するとか詳しい人に聞いてください。

1つ目で左上と右下の斜辺を、2つ目で右上と左下の斜辺を、3つ目で左右の辺を描いています。18.3%とか6%とかは計算で出したわけではなく、ひたすら試行錯誤して「ここが一番それっぽいんじゃね?」っていうアレで決めたものです。もっといいのがあったら教えて下さい。

このサイトのヘッダーとフッターにある六角形はどちらもこの方法で描かれています。ちょっとした飾りにはいいかもしれないですね(CSSで描く意味はあんまり無いけど)。かなり雑な説明でしたけれども、CSSで六角形を描きたいとかいう暇な方のお役に立てれば幸いです。