CSSで五角形を描くサンプルコード
CSSで五角形を描くには、CSSのclip-pathプロパティを使用してポリゴンの形状を定義することができます。以下は、五角形を描くサンプルコードです。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Pentagon Shape</title>
</head>
<body>
<div class="pentagon"></div>
</body>
</html>
CSS (styles.css):
.pentagon {
width: 200px;
height: 200px;
background-color: #4285f4;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
このコードは、五角形の形状を持つ青色のdiv要素を作成します。clip-pathプロパティのpolygon関数を使用して、五角形の頂点をパーセンテージで指定しています。
この五角形のサイズを変更したい場合は、.pentagonクラスのwidthとheightプロパティを調整してください。また、五角形の色を変更したい場合は、background-colorプロパティを変更してください。
clip-pathを使わない五角形のCSSデザイン
clip-pathを使わずに、CSSの::beforeおよび::after疑似要素を使用して五角形を作成することもできます。以下にそのサンプルコードを示します。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Pentagon Shape</title>
</head>
<body>
<div class="pentagon"></div>
</body>
</html>
CSS (styles.css):
.pentagon {
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 72.17px solid #4285f4;
}
.pentagon::before,
.pentagon::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.pentagon::before {
top: 72.17px;
left: -50px;
border-bottom: 36.09px solid #4285f4;
}
.pentagon::after {
top: 72.17px;
left: 0;
border-bottom: 36.09px solid #4285f4;
}
このコードは、::beforeと::after疑似要素を使用して五角形を構成する三角形を作成します。三角形のサイズは、borderプロパティを変更することで調整できます。五角形の色を変更するには、border-bottomプロパティの色を変更してください。
この方法では、構成要素の三角形のサイズを正確に計算する必要があります。そのため、五角形のサイズや形状を変更する場合は、計算を行い、適切な値を指定してください。