CSSで星型を描くサンプルコード
CSSで星型を描く方法の一つは、疑似要素と変換（回転とスケール）を組み合わせて描く方法です。以下にサンプルコードを示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.star {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background-color: gold;
clip-path: polygon(50% 0%, 61% 35%, 100% 35%, 69% 57%, 82% 91%, 50% 70%, 18% 91%, 31% 57%, 0% 35%, 39% 35%);
}
.star:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: gold;
clip-path: polygon(50% 0%, 61% 35%, 100% 35%, 69% 57%, 82% 91%, 50% 70%, 18% 91%, 31% 57%, 0% 35%, 39% 35%);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
このサンプルコードでは、星型を形作るためにCSSのclip-pathプロパティを利用しています。.starクラスの要素とその:before疑似要素に対して、それぞれ半分の星型を描画し、:before疑似要素を180度回転させることで星型を完成させています。星型の色はbackground-colorプロパティで変更できます。また、星型のサイズは.starクラスのwidthとheightプロパティを調整することで変更できます。
clip-pathを使わない方法
clip-pathを使わずにCSSで星型を描く方法は、疑似要素と変換（回転）を組み合わせて描く方法です。以下にサンプルコードを示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.star {
position: relative;
display: inline-block;
width: 0;
height: 0;
margin-left: 50px;
margin-bottom: 50px;
border-right: 100px solid transparent;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
.star:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 30px;
left: -50px;
border-right: 100px solid transparent;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
transform: rotate(-35deg);
}
.star:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: -50px;
border-right: 100px solid transparent;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
transform: rotate(105deg);
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
このサンプルコードでは、.starクラスの要素と、:beforeおよび:after疑似要素を使用して3つの三角形を作成し、それらを回転させて組み合わせることで星型を描画しています。星型の色はborder-bottomプロパティで変更できます。また、星型のサイズはborder-rightおよびborder-bottomプロパティを調整することで変更できます。ただし、transformプロパティのrotate()関数の角度と、topおよびleftプロパティも適切に調整する必要があります。