CSSでひし形を描くサンプルコード
CSSでひし形（菱形）を描くには、transformプロパティを使って要素を回転させることができます。以下にサンプルコードを示します。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSでひし形を描く</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rhombus"></div>
</body>
</html>
CSS (styles.css):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.rhombus {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
.rhombus::before,
.rhombus::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: inherit;
}
.rhombus::before {
transform: rotate(90deg);
}
.rhombus::after {
transform: rotate(180deg);
}
このサンプルコードでは、.rhombusというクラス名の要素に対して、transform: rotate(45deg);を適用して45度回転させています。さらに、::beforeと::after疑似要素を使って、それぞれ90度と180度回転させた同じ大きさの四角形を重ねています。これにより、ひし形（菱形）が描かれます。
clip-pathを使ったひし形のサンプルコード
clip-pathを使ってCSSでひし形（菱形）を描く方法は、次のサンプルコードのようになります。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSでひし形を描く - clip-path</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rhombus"></div>
</body>
</html>
CSS (styles.css):
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.rhombus {
width: 100px;
height: 100px;
background-color: #3498db;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
このサンプルコードでは、.rhombusというクラス名の要素に対して、clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);を適用しています。clip-pathプロパティを使って、要素の形をクリップすることができます。ここでは、polygon()関数を使って4つの座標を指定して、ひし形（菱形）を描いています。