CSSで六角形を描くサンプルコード
CSSを使って六角形を描くには、2つの方法があります。1つは、複数の要素を使って形状を組み立てる方法、もう1つは、クリップパスを使用する方法です。
- 複数の要素を使って形状を組み立てる方法:
<!DOCTYPE html>
<html>
<head>
<style>
.hexagon {
position: relative;
width: 100px;
height: 57.74px; /* height = (width / 2) * sqrt(3) */
background-color: #4CAF50;
margin: 28.87px 0; /* margin-top/bottom = (height / 2) */
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #4CAF50; /* border = (height / 2) */
}
.hexagon:after {
top: 100%;
border-top: 28.87px solid #4CAF50; /* border = (height / 2) */
}
</style>
</head>
<body>
<div class="hexagon"></div>
</body>
</html>
- クリップパスを使用する方法:
<!DOCTYPE html>
<html>
<head>
<style>
.hexagon {
width: 100px;
height: 57.74px; /* height = (width / 2) * sqrt(3) */
background-color: #4CAF50;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
</style>
</head>
<body>
<div class="hexagon"></div>
</body>
</html>
どちらの方法でも、HTMLファイルに貼り付けて実行することで、緑色の六角形が表示されます。サイズや色などのスタイルは、必要に応じて変更してください。
clip-pathを使わない方法
クリップパスを使わないで、六角形を描く方法として、2つの三角形と1つの長方形を組み合わせる方法があります。以下に、サンプルコードを示します。
<!DOCTYPE html>
<html>
<head>
<style>
.hexagon {
position: relative;
width: 100px;
height: 57.74px; /* height = (width / 2) * sqrt(3) */
background-color: #4CAF50;
margin: 28.87px 0; /* margin-top/bottom = (height / 2) */
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 28.87px solid #4CAF50; /* border = (height / 2) */
}
.hexagon:after {
top: 100%;
border-top: 28.87px solid #4CAF50; /* border = (height / 2) */
}
</style>
</head>
<body>
<div class="hexagon"></div>
</body>
</html>
このコードでは、:before および :after 疑似要素を使って、2つの三角形を作成しています。これらの三角形を長方形の上下に配置することで、六角形が描かれます。このコードをHTMLファイルに貼り付けて実行すると、緑色の六角形が表示されます。サイズや色などのスタイルは、必要に応じて変更してください。