目次
はじめに
今回はサイトコーディングの「ご契約までの流れ」や「お申し込みのSTEP」などの流れセクションやSTEPセクションでよく見る三角形をHTML・CSSで作成したのでソースコードと一緒にご紹介します。
大きさや、色は適宜調整ください。
三角形のレイアウト確認
上向き三角形のレイアウト
PR
<span class="triangle-up"></span>.triangle-up::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-bottom: 40px solid currentColor;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: translate(-50%,-65%);
}上向き三角形の使用例
下記記事で紹介しているハンバーガーメニュー内で子階層を持っているメニューが閉じているときに使用しています。
ハンバーガーメニュー
ハンバーガーメニューを作成しました。3本線からバツ印に変わるボタン、右からスライドしてくる第2階層もあるハンバーガーメニューです。ソースコードも紹介しています。
下向き三角形のレイアウト
PR
<span class="triangle-down"></span>.triangle-down::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 40px solid currentColor;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: translate(-50%,-35%);
}下向き三角形の使用例
下記記事で紹介しているハンバーガーメニュー内で子階層を持っているメニューが開いているときに使用しています。
ハンバーガーメニュー
ハンバーガーメニューを作成しました。3本線からバツ印に変わるボタン、右からスライドしてくる第2階層もあるハンバーガーメニューです。ソースコードも紹介しています。
左向き三角形のレイアウト
PR
<span class="triangle-left"></span>.triangle-left::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid currentColor;
transform: translate(-65%,-50%);
}右向き三角形のレイアウト
PR
<span class="triangle-right"></span>.triangle-right::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 40px solid currentColor;
transform: translate(-35%,-50%);
}三角形をCSSで作成する時のポイント
三角形が向いている方向のborderがない。三角形が向いている方向の反対側のborderに色を指定する。残り2つのborderの色をtransparentにする。
三角形が向いている方向の反対側のborderのpxを大きくすると細長い三角形になる。残り2つのborderのpxを大きくすると横幅が広い三角形になる。
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
