CSSでひし形を描くサンプルコード

2023-04-23

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つの座標を指定して、ひし形（菱形）を描いています。