CSSで六角形を作る

CSSで六角形を作るためのコードメモです。擬似要素を使った方法とclip-pathを使った方法をご紹介します。

擬似要素を使って六角形を作る

四角形を作って上下に三角形を付け足す方法で実装しています。

【サンプルコード】(コード右上の実行ボタン(Execute Code)から実際の表示を確認できます)

<style>
  .hexagon_box {
  display: block;
  position: relative;
  width: 200px;
  height: 100px;
  color: #fff;
  background: #118c99;
   margin-top: 100px;
  }
.hexagon_box::before {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  top: -50px;
  border-style: solid;
  border-width: 0 100px 50px 100px;
  border-color: transparent transparent #118c99 transparent
}
.hexagon_box::after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  bottom: -50px;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  border-color: #118c99 transparent transparent transparent
}
</style>
<div class="hexagon_box">
  <p>六角形</p>
</div>

上記のサンプルコードの .hexagon_box が四角形の部分です。この要素に ::before, ::after で擬似要素を追加し、そこで三角形を作ってくっつけています。

【PR】

写真と動画の人気オンラインコース

CSS の clip-path で六角形を作る

CSSの「clip-path」プロパティを使って六角形を作ることもできます。

<style>
  .hexagon_box02 {
  display: block;
  position: relative;
  width: 280px;
  height: 280px;
  color: #000;
  background: #118c99;
  margin-top: 50px;
  clip-path: polygon(25% 0%, 74% 0, 100% 51%, 75% 100%, 25% 100%, 0 50%);
  }
</style>
<div class="hexagon_box02"></div>

自分でパスを考えて指定するのは難しいですが、clip-pathのジェネレータ「Clippy」を使えば自動的にパス付きのコードを生成してくれるのでとても便利です。このツールは六角形のみならず様々な多角形で利用できます。

生成したい形を右にあるリストから選んで表示させたい形・大きさに調整します。下に clicp-path のコードが生成されるのでこちらをコピペするとその形に切り取られて表示されます。

カテゴリー : HTML-CSS

TOPへ