CSSで六角形を作るためのコードメモです。clip-pathを使った方法と擬似要素を使った方法をご紹介します。
CSS の clip-path で六角形を作る
CSSの「clip-path」プロパティを使ったサンプルコードです。
HTML
<div class="hexagon_box01"></div>CSS
.hexagon_box01 {
display: block;
position: relative;
width: 100px;
height: 100px;
background: #118c99;
clip-path: polygon(25% 0%, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}表示例
clip-path: polygon(50% 0, 99% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); にしたバージョン
表示例
自分でパスを考えて指定するのは難しいですが、clip-pathのジェネレータ「Clippy」を使えば自動的にパス付きのコードを生成してくれるのでとても便利です。このツールは六角形のみならず様々な多角形で利用できます。
生成したい形を右にあるリストから選んで表示させたい形・大きさに調整します。下に clicp-path のコードが生成されるのでこちらをコピペするとその形に切り取られて表示されます。
擬似要素を使って六角形を作る
四角形を作って上下に三角形を付け足す方法で実装したサンプルコードです。要素に ::before, ::after で擬似要素を追加し、そこで三角形をつけています。
HTML
<div class="hexagon_box03"></div>CSS
.hexagon_box03 {
display: block;
position: relative;
width: 200px;
height: 100px;
background: #118c99;
}
.hexagon_box03::before,
.hexagon_box03::after {
box-sizing: border-box;
content: "";
display: block;
position: absolute;
width: 200px;
height: 70px;
background: #118c99;
left: 0;
}
.hexagon_box03::before {
top: -70px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.hexagon_box03::after {
bottom: -70px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}表示例
この書き方だと隙間ができてしまう場合があり、位置調整が必要なことも。基本的には clip-path で六角形を一気に作ってしまった書き方がシンプルで簡単です。
あまりないかとは思いますが、あえて切り離したデザインにしたり、そこでアニメーションをかけたりといった場合は使えるかなと思います。
表示例
カテゴリー : HTML-CSS
