CSSで三角形を描くサンプルコード
CSSで三角形を描く方法はいくつかありますが、ここでは一般的な方法として、borderプロパティを使用して描くサンプルコードを示します。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Triangle</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="triangle"></div>
</body>
</html>
CSS (styles.css):
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #2ecc71;
}
このサンプルコードでは、三角形を表すdiv要素を作成し、その要素に適用するCSSスタイルを定義しています。この場合、上向きの三角形が描かれます。border-leftとborder-rightの幅を変えることで、三角形の底辺の長さを調整できます。また、border-bottomの高さを変えることで、三角形の高さを調整できます。border-bottomの色を変えることで、三角形の色を変更できます。
clip-pathを使った三角形
clip-pathプロパティを使ってCSSで三角形を描くサンプルコードを示します。
HTML:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Clip-path Triangle</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="triangle"></div>
</body>
</html>
CSS (styles.css):
.triangle {
width: 100px;
height: 100px;
background-color: #3498db;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
このサンプルコードでは、三角形を表すdiv要素を作成し、その要素に適用するCSSスタイルを定義しています。clip-pathプロパティの値として、polygon()関数を使って三角形の頂点を指定します。この場合、上向きの三角形が描かれます。
polygon()関数の引数である座標を変更することで、形状や向きを調整できます。また、widthとheightを変更することで、三角形のサイズを調整できます。background-colorを変更することで、三角形の色を変更できます。