CSSで多角形を作成するには？

お問い合わせ
ホーム > ブログ > css > CSSで多角形を作成するには？

CSSで多角形を作成するには？

CSSの「clip-path」プロパティは、要素を特定の形状に切り取るために使用されます。このプロパティを使用すると、要素の一部だけを表示し、残りを隠すことができます。さまざまな形状（例えば、円形、多角形、楕円形など）を指定することができ、SVGの<clipPath>要素とも互換性があります。

使い方と構文

clip-path: <clip-source>;

<clip-source>は以下のような形式で指定できます。

  1. 基本形状：
    • circle(): 円形
    • ellipse(): 楕円形
    • polygon(): 多角形
    • inset(): 長方形
  2. SVG Path：
    • path(): SVGのパスデータを使用してクリップ
  3. URL：
    • url(): SVGの<clipPath>要素を指定するURL

polygon()を使用して多角形を作る

座標を指定する

角のポイントをx座標,y座標で指定します。
xとyのセット数が角の数です。

以下は、そのセットが4つあるので四角形となります。

clip-path: polygon(x y, x y, x y, x y);

このxとyに数値を入れると、このような表示になります。

四角形を作る

<div class=”shikaku”>
</div>
.shikaku{
background: green;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

五角形を作る

<!DOCTYPE html>
<html>
<head>
<style>
.gokaku{
background: pink;
clip-path: polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);
height:100px;
}
</style>
</head>
<body>
<div class="gokaku">
</div>
</body>
</html>

クリップ（clipping）とマスク（masking）の違い

項目クリップ (clip)マスク (mask)
使用プロパティclip-pathmask, mask-image
効果指定した範囲 外 を完全に隠す指定した画像やグラデーションで部分的に透明化
透明度の制御できない（境界の外は完全に非表示）できる（半透明やぼかしも可能）
適用できる形四角形・円・多角形・任意のパス画像・SVG・グラデーション

クリップ（clipping）の例

.clipped-box {
    width: 200px;
    height: 200px;
    background-color: coral;
    clip-path: circle(50% at 50% 50%);
}

📌 結果:

  • 要素の外側が完全に切り取られる。
  • クリップの形は circle や polygon で定義できる。

マスク（masking）の例

.masked-box {
    width: 200px;
    height: 200px;
    background-color: coral;
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

📌 結果:

  • 中央は完全に表示され、外側に行くほど透明になっていく。
  • グラデーションなどで 半透明効果 を作ることができる。

どっちを使うべき？

✅ 境界の外を完全に非表示にしたい場合 → clip-path（クリップ）
✅ ぼかしや透明度を活用したい場合 → mask（マスク）

例えば、ロゴの一部をくり抜くなら クリップ、画像をフェードアウトさせるなら マスク を使うと効果的です！

クリップの仕組み

  • 通常の要素 は、指定した width や height に基づいて全面が表示される。
  • クリップを適用 すると、指定した形状（例：長方形、多角形、楕円、円）以外の部分が見えなくなる。

クリップの主な方法

  1. clip-path を使う方法（CSS3以降）
    • clip-path: inset(10px 20px 30px 40px); → 四角形でクリップ
    • clip-path: circle(50% at 50% 50%); → 円形でクリップ
    • clip-path: polygon(0% 0%, 100% 0%, 50% 100%); → 三角形でクリップ
  2. overflow: hidden; を使う方法
    • 親要素の範囲外の部分を非表示にする。

例題

例1: 円形にクリップ


<style>
    .container4 {
        width: 300px;
        height: 200px;
        background-color: lightblue;
        position: relative;
        overflow: hidden;
    }

    .clipped-box4 {
        width: 400px;
        height: 400px;
        background-color: orange;
        position: absolute;
        top: -50px;
        left: -50px;
        clip-path: circle(50% at 50% 50%); /* 円形 */
    }
</style>
<div class="container4">
    <div class="clipped-box4"></div>
</div>

clip-path: circle(50% at 50% 50%); を使用して、要素を円形にクリップしました。

  • 50% → 円の半径（要素の幅・高さに対する割合）
  • at 50% 50% → 円の中心位置（50% 50% は中央）

円のサイズを変更したい場合は、circle(40% at 50% 50%) のように半径の値を調整してください。

例2: 楕円形にクリップ

<style>
    .container3 {
        width: 300px;
        height: 200px;
        background-color: lightblue;
        position: relative;
        overflow: hidden;
    }

    .clipped-box3 {
        width: 300px;
        height: 200px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: ellipse(50% 40% at 50% 50%);
    }
</style>

<div class="container3">
    <div class="clipped-box3"></div>
</div>

clip-path: ellipse(50% 40% at 50% 50%); を使用して、要素を楕円形にクリップしました。
このプロパティの構成は以下の通りです：

  • 50% 40% → 楕円の 横幅の半径 と 縦幅の半径
  • at 50% 50% → 楕円の中心位置（50% 50% は中央）

値を調整することで、楕円の形状を変更できます。

例3: 多角形にクリップ

<style>
.container2 {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    position: relative;
    overflow: hidden;
}

.clipped-box2 {
    width: 400px;
    height: 300px;
    background-color: blue;
    position: absolute;
    top: -50px;
    left: -50px;
    clip-path: polygon(30% 0%, 80% 0%, 50% 50%, 110% 100%, 20% 100%, 0% 50%);
}
</style>

<div class="container2">
    <div class="clipped-box2"></div>
</div>

例4: 長方形にクリップ

<style>
        .container {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            position: relative;
            overflow: hidden;
        }

        .clipped-box {
            width: 400px;
            height: 300px;
            background-color: coral;
            position: absolute;
            top: -50px;
            left: -50px;
            clip-path: inset(50px 50px 50px 50px); /* 上 右 下 左 の順でクリップ */
        }
    </style>
<div class="container">
        <div class="clipped-box"></div>
    </div>

これらの例を使用して、clip-pathプロパティの基本的な使い方と、異なる形状で要素をクリップする方法を学ぶことができます。各例では、異なる形状を使用して画像や要素をクリップしています。これにより、デザインに独自性を持たせることができます。