CSSで多角形を作成するには？ | 福岡LP(ランディングページ)制作専門

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

使い方と構文

clip-path: <clip-source>;

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

基本形状：
- circle(): 円形
- ellipse(): 楕円形
- polygon(): 多角形
- inset(): 長方形
SVG Path：
- path(): SVGのパスデータを使用してクリップ
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>

例題

例1: 円形にクリップ

Clip Path Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
  .circle {
    width: 200px;
    height: 200px;
    background: url('https://via.placeholder.com/200') no-repeat center/cover;
    clip-path: circle(50%);
  }
</style>
</head>
<body>
  <div class="circle"></div>
</body>
</html>

例2: 楕円形にクリップ

Clip Path Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
  .ellipse {
    width: 300px;
    height: 200px;
    background: url('https://via.placeholder.com/300x200') no-repeat center/cover;
    clip-path: ellipse(40% 60% at 50% 50%);
  }
</style>
</head>
<body>
  <div class="ellipse"></div>
</body>
</html>

例3: 多角形にクリップ

Clip Path Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
  .polygon {
    width: 200px;
    height: 200px;
    background: url('https://via.placeholder.com/200') no-repeat center/cover;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
</style>
</head>
<body>
  <div class="polygon"></div>
</body>
</html>

例4: 長方形にクリップ

Clip Path Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clip Path Example</title>
<style>
  .inset {
    width: 300px;
    height: 200px;
    background: url('https://via.placeholder.com/300x200') no-repeat center/cover;
    clip-path: inset(20px 40px 60px 80px);
  }
</style>
</head>
<body>
  <div class="inset"></div>
</body>
</html>

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