CSSで正六角形・六角形ボタンを作る方法

CSSで六角形や六角形ボタンを作る方法を紹介しています。コードはコピペで使えます。

正六角形の場合、beforeやafterの長方形を60度傾けて実現します。元の長方形の縦横サイズ計算が必要になります。

六角形ボタンの場合、before・afterのborderで左右の三角形を作ってくっつけるのが主流でしょう。

CSSで六角形を作る方法

本記事ではCSSだけで六角形のマークやボタンを作る方法を解説していきます。

通常のWEBページ制作で六角形を表示・利用する事自体、あまり無いかもしれませんね。

テクノロジー系やロボット系のWEBサイトなどで「SF感」の演出に、この六角形デザインやボタンがよく使われています。

コードはコピペして使えますので、機会があればぜひ活用してみて下さい。

正六角形（縦）

まずは角が真上に来ている縦タイプの正六角形を作っていきましょう。

ど真ん中にテキストを入れた形で紹介します。

正六角形と言っていますが、実は横幅が少し広い六角形です。

数値上正確な六角形を作ると、見栄えがあまり良くないためですのでご了承下さい。

縦向き正六角形（角が真上）の作り方

HTML

<div class="hexagon1"> <div class="cont">六角形</div> </div>

CSS

.hexagon1 { margin-top: 40px; width: 88px; height: 50px; background: #aaa; position: relative; } .hexagon1 .text { height: 100%; font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .hexagon1::before, .hexagon1::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #aaa; z-index: 0; } .hexagon1::before { transform: rotate(60deg); } .hexagon1::after { transform: rotate(-60deg); }

サンプル

解説

本サンプルは基本的に3つの長方形を重ねています。

まずはベースとして横長の、ここでは88×50の長方形を用意します。

この長方形に対し、上下左右の中央にテキストが来るよう調整しています（.textのCSS）。

display: flex;やjustify-center: center;の記述が全てそれにあたります。

before・afterの2つの長方形を作る

次にbefore・after属性を追加していきます。

これは親要素に対して横幅縦幅ともに100％としているので、ベースと同様の88×50サイズになりますね。

beforeとafterで生成した2つの長方形が、ベースの長方形の上に重なっています。

rorateで60度傾ける

この2つの長方形を、transform:rorateで60度ずつ傾けましょう。

傾ける際、図の様に長方形を色分けするとわかりやすくなります。

水平状態のベース長方形に対し、beforeは下に「60度」afterは上に「-60度」回転する事になります。

60度傾ける事で角部分がくっついて、ちょうど6辺を作っている訳ですね。

beforeとafterの四角よりもテキストが上に来るように、z-indexで重なり順も調整しています。

自由なサイズの六角形を作るために

上記サンプルは88×50の長方形を3つ重ねて、1辺が50pxの六面体を構成しています。

サンプル上それなりのサイズで作った訳ですが、実際に構成する時のサイズはその場面によって違いますよね。

例えば1辺が30pxの六角形を作るには、ベースとなる長方形の縦サイズをいくつにするのかを計算する必要があります。

目安は1.76倍

目安としては「1辺の幅×1.76倍」で縦サイズを計算しましょう。

例えば1辺が30pxの六角形なら、ベース長方形の横サイズは「30×1.76」で計算します。

つまり「53px×30px」の長方形をベースとすればうまくいくはずです。

正六角形（横）

次に角が90度真横を向いている、横タイプの正六角形を作っていきましょう。

基本的には先程のサンプルと同じで、長方形のサイズを変えて調整しています。

横向き正六角形（辺が真上）の作り方

HTML

<div class="hexagon2"> <div class="text">六角形</div> </div>

CSS

.hexagon2 { margin-top: 40px; width: 50px; height: 88px; background: #aaa; position: relative; } .hexagon2 .text { height: 100%; font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .hexagon2::before, .hexagon2::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #aaa; z-index: 0; } .hexagon2::before { transform: rotate(60deg); } .hexagon2::after { transform: rotate(-60deg); }

サンプル

解説

この正六角形も先程同様に3つの長方形を重ねて作りますが、ベースとなる長方形のサイズが違います。

ここでは50×88の縦に長い長方形とし、幅と縦のサイズが逆になっている事がわかります。

違いはこの部分だけです。

beforeとafterの長方形もベースと同様に縦長の長方形になりますね。

rorateで60度傾ける

先程と同じように、ベース長方形（縦長）を中心にそれぞれを60度傾けます。

上記の様に色を変えてみると、ベース長方形の位置とbefore・afterの長方形の傾きがわかりますね。

beforeは右に「60度」、afterは左に「-60度」回転しています。

これにより今度は角が真横を向いた正六角形になります。

ベース長方形の露出が違うだけ

縦タイプと違う点は、ベースとなる長方形の露出部分です。

この様にサイズの縦横を逆にすることで、縦タイプ・横タイプを自由に作る事ができる訳ですね。

正六角形（枠のみ）

先程は背景色が入った六角形でしたが、次は六角形に枠線をつけるタイプを紹介しましょう。

先程のやり方でも六角形に枠線をつける事ができますが、ここではあえて別の方法で六角形を作ります。

六角形を作るのにも様々な方法がある訳ですね。

枠だけ正六角形の作り方

HTML

<div class="hexagon3"> <div></div> <div></div> <div></div> <p class="cont">六角形</p> </div>

CSS

.hexagon3 { width: 150px; height: 130px; position: relative; } .hexagon3 p.text { height: 100%; font-size: 16px; font-weight: bold; color: #454545; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; } .hexagon3 div { width: 75px; height: 130px; position: absolute; left: 40px; border-top: 2px solid #000; border-bottom: 2px solid #000; transform-origin: center; box-sizing: border-box; } .hexagon3 div:nth-of-type(1) { transform: rotate(0deg); } .hexagon3 div:nth-of-type(2) { transform: rotate(60deg); } .hexagon3 div:nth-of-type(3) { transform: rotate(120deg); }

サンプル

解説

本サンプルは、親要素とは別にdiv要素を3つ入れたものになっています。

厳密に言うと親となるベースの四角形も含めて4つになりますね。

ベースは150×130の長方形（グレー色）です。それに対し中のdivは、その横幅が丁度半分の75×130のサイズです。

div要素の上と下にborderをつける

position: absolute;で絶対配置にしますが、うち1つのdivは位置はそのまま固定です。

残り2つのdiv長方形にそれぞれ60度の傾きをつけています。

div長方形は3つとも、上と下のみにborderをつけていますので、傾けた結果、枠線が丁度正六角形の形につながる訳ですね。

長方形の重なりを表示し、上下の枠線の色を変更した状態

上記の様に色分けすると、3つの長方形の枠線部分で六角形を形成しているのがわかると思います。

ベースの長方形を使わないタイプ

今回は上のサンプルと違い、ベースとなる長方形に対して3つのdivが絶対配置で収まっている事がわかります。

上の方で紹介したサンプルは、六角形の1辺をベースの長方形自体が担っていました。

それに対し今回ベースの長方形は単なる「下敷き」であり、六角形の1辺となるお手伝いはしていません。

六角形ボタン

ここまでCSSで六角形を作り、背景色や枠線をつけてきましたね。

しかしSF感を出すのなら、もっと横に長い「六角形ボタン」の作り方を知っておくことは必須でしょう。

この六角形ボタンは当然、サイズ調整も自由にできる必要があります。

上で紹介したサンプルとはまた全然違う方法で構築をしていきます。

六角形ボタンの作り方

HTML

<a class="hexagon4">六角形リンク</a>

CSS

.hexagon4 { margin-top: 40px; font-size: 14px; line-height: 52px; position: relative; display: inline-block; width: 162px; height: 52px; transition: all .1s ease-in-out; text-align: center; text-decoration: none; color: #fff; background-color: #cc0000; } .hexagon4:before, .hexagon4:after { position: absolute; top: 0; width: 0; height: 0; content: ''; border: 26px solid transparent; border-right: 13px solid transparent; border-left: 13px solid transparent; } .hexagon4:before { right: 100%; border-right-color: #cc0000; } .hexagon4:after { left: 100%; border-left-color: #cc0000; } .hexagon4:hover{ opacity: 0.1; cursor: pointer; font-color: #000; }

サンプル

六角形リンク

解説

これまで紹介した正六角形は、傾けた角度が60度と分かりやすい数値でした。

それに対し横長の六角形の場合、6つの角ごとにぞれぞれ角度が変わりますので複雑になります。

そこで今回は重ねた長方形を傾けるのではなく、before・after疑似要素で生成したborderを使って表現をしていきます。

ベースの長方形の生成

まずは適当な横長サイズの長方形を作ります。今回は160×52サイズの長方形にしました。

※ここで52pxと半端な数値にしているのには訳があります。

これが、テキストリンクが入るベースエリアになりますね。

borderのみで「四角形」を作る

次にbefore・after疑似要素を用意します。

before・afterに設定するのはborderのみで、サイズ関連は全て「0」に設定しましょう。

まず今回のボタン縦幅が「52px」なので、半分の「26px」で四方（上下左右）のborderを設定します。

要素自体に縦横は無いため（0にしたため）、border枠だけで「52px×52px」の正方形ができます。

52px×26pxの長方形に変更

さらにborderの左右を半分の「13」に設定すると、border枠は「52px×26px」の長方形になりますね。

長方形borderをベースのエリア外へ移動

次にbeforeはright: 100%で要素の左端外に移動し、afterはleft: 100%で右端外に移動します。

100％に設定されていますから、両要素は四角形ベースの外にはみ出ます。

borderの左右にのみ色を付ける

ここで、それぞれのborder長方形の「右・左部分にのみ」色を付けます。

長方形の右部分・左部分のみに色が付くので、左向きと右向きの三角形に見える様になります。

解説するために元から赤でしたが、本来はtransparentなので透明です。色を付けて初めて三角形が現れます。

三角形はベース四角形の右端と左端にくっついていますので、結果横長の六角形の形になります。

マウスオーバー効果もできる

このタイプの場合、マウスオーバー時のopacityなどを設定すれば、ホバー効果をつける事もできます。

六角形リンク

一押し人気コーナー紹介