CSSで三日月を描くサンプルコード
CSSを使って三日月を描くために、疑似要素とborder-radiusプロパティを利用する方法があります。以下にサンプルコードを示します:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Crescent Moon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="moon"></div>
</body>
</html>
CSS (styles.css):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #1a1a1a;
}
.moon {
position: relative;
width: 100px;
height: 100px;
background-color: #ffdd00;
border-radius: 50%;
overflow: hidden;
}
.moon:before {
content: "";
position: absolute;
right: -30%;
top: 0;
width: 100%;
height: 100%;
background-color: #1a1a1a;
border-radius: 50%;
}
このサンプルコードでは、div要素にmoonクラスを適用しています。CSSでは、.moonクラスの要素が円形になるようにborder-radiusプロパティを使用しています。そして、疑似要素::beforeを使用して三日月の形状を再現しています。overflow: hiddenを適用することで、三日月の部分だけが表示されます。
上記のサンプルコードを自分のプロジェクトに適用し、必要に応じて色やサイズを調整してください。
clip-pathを使って描く三日月のサンプルコード
clip-pathを使って三日月を描くサンプルコードは以下の通りです。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Crescent Moon with Clip-path</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="moon"></div>
</body>
</html>
CSS (styles.css):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #1a1a1a;
}
.moon {
width: 100px;
height: 100px;
background-color: #ffdd00;
border-radius: 50%;
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
0% 100%,
20% 50%
);
}
このサンプルコードでは、div要素にmoonクラスを適用しています。CSSでは、.moonクラスの要素が円形になるようにborder-radiusプロパティを使用しています。そして、clip-pathプロパティを使用して三日月の形状を再現しています。
上記のサンプルコードを自分のプロジェクトに適用し、必要に応じて色やサイズを調整してください。clip-pathプロパティの値を変更することで、さまざまな形状の三日月を描くことができます。