CSSで作る多角形：基本から実例まで | 福岡LP(ランディングページ）ホームページ制作

CSSを使って、さまざまな形の多角形を作成することができます。多角形を作るためには、主にborderとtransformプロパティを活用します。これらの技術を使うと、シンプルなHTML要素を使って複雑な形状をデザインすることが可能です。この記事では、CSSを使って多角形を作成する方法を説明し、実例も紹介します。

1. CSSで多角形を作る基本的な方法

多角形は、基本的にdiv要素にCSSを適用して作成します。CSSのborderを利用して、指定された形を作り出すのが最も一般的な方法です。例えば、四角形を作るには、width、height、そしてborderプロパティを使いますが、多角形の場合は、ボーダーを利用して角を切り取るテクニックが必要になります。

2. 三角形を作る方法

最も基本的な多角形である三角形は、borderプロパティを使うことで簡単に作成できます。

HTML

htmlコードをコピーする<div class="triangle"></div>

CSS

cssコードをコピーする.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;  /* 左辺 */
    border-right: 50px solid transparent; /* 右辺 */
    border-bottom: 100px solid #007bff;   /* 底辺の色 */
}

説明

width: 0 と height: 0 は、要素自体のサイズをゼロにします。
border-left と border-right は透明にし、border-bottom に色を指定します。これにより、三角形の底辺が描画されます。

このコードで、青い三角形が表示されます。

3. 四角形の斜めカット（菱形）

菱形は、直線的にカットされた四角形として表現できます。これもCSSのtransformプロパティを使って作成します。

HTML

htmlコードをコピーする<div class="diamond"></div>

CSS

cssコードをコピーする.diamond {
    width: 100px;
    height: 100px;
    background-color: #ff6347;
    transform: rotate(45deg);  /* 45度回転 */
    margin: 50px;
}

説明

四角形をそのまま回転させることで、菱形に変形させます。rotate(45deg)で要素を45度回転させることにより、菱形が完成します。

4. 五角形

五角形は、CSSのclip-pathプロパティを使うことで作成できます。clip-pathは、要素を特定の形で切り抜くために使用します。

HTML

htmlコードをコピーする<div class="pentagon"></div>

CSS

cssコードをコピーする.pentagon {
    width: 100px;
    height: 100px;
    background-color: #28a745;
    clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
}

説明

clip-path: polygon() で多角形の各頂点を指定します。ここでは五角形の座標を指定しています。
polygon()の中で、各座標を%で指定し、形を作ります。

このコードで緑色の五角形が表示されます。

5. 星形

星形もclip-pathを使うことで作成できます。これは少し複雑ですが、以下のコードで美しい星形を作れます。

HTML

htmlコードをコピーする<div class="star"></div>

CSS

cssコードをコピーする.star {
    width: 100px;
    height: 100px;
    background-color: #f39c12;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

説明

clip-path: polygon() で10個の頂点を指定し、星形を作成しています。
このような形は、頂点の座標を正確に指定することで作れます。

6. 六角形

六角形も同様に、clip-pathで作成することができます。以下のコードでは、六角形を描画します。

HTML

htmlコードをコピーする<div class="hexagon"></div>

CSS

cssコードをコピーする.hexagon {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

説明

六角形もclip-pathで作成します。頂点を指定することで六角形が完成します。
clip-path: polygon() の座標指定で六角形の形を作ります。

7. 多角形の応用：カスタムボタン

多角形を使ったデザインは、ボタンやアイコンなど、インタラクティブな要素にも適用できます。以下に、六角形ボタンを作成する例を紹介します。

HTML

htmlコードをコピーする<button class="hexagon-button">今すぐ登録</button>

CSS

cssコードをコピーする.hexagon-button {
    width: 150px;
    height: 150px;
    background-color: #e74c3c;
    border: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    line-height: 150px;  /* ボタン内の文字を中央に配置 */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hexagon-button:hover {
    transform: scale(1.1);  /* ホバー時に少し大きくなる */
}

説明

六角形のボタンを作成し、clip-pathで形状を決定します。
ボタンにホバー効果を追加し、ユーザーがボタンにカーソルを合わせると、少し大きくなるアニメーションを加えています。

8. 結論

CSSのclip-pathやborder、transformを駆使することで、シンプルなHTML要素を使ってさまざまな多角形を作成できます。これらのテクニックは、ウェブデザインにおいて創造的な要素を追加するための強力なツールです。例えば、ボタン、アイコン、背景などに応用することで、視覚的に魅力的なデザインを作成することができます。多角形を使用したデザインは、シンプルでありながら洗練された印象を与えることができるため、効果的に活用することができます。