コーディング部ログ
CSSで三角形を作成する方法(基礎編)2021.08.14
今回はCSSのborderプロパティで三角形を作成する方法についてご紹介します。
色違いの三角形を複数用意したい場合、画像ならそれぞれ用意する必要がありますが、
CSSで作成すればカラーを変更するだけです。
効率的なコーディングをするためにも、ぜひCSSで三角形を作成する方法をマスターしましょう!
CSSで三角形を作成する方法
以下が、実際にCSSで作成した三角形です。
コードを合わせて掲載します。
See the Pen CSSで三角形を作成する方法 by Hiro (@moref) on CodePen.
.triangle1 {
border-right: 50px solid transparent;
border-bottom: 86.6px solid #5F939A;
border-left: 50px solid transparent;
}
冒頭でお伝えした通り、CSSのborderプロパティのみで三角形を作成することができました。
上向きの三角形にしたい場合は、上記の通り、border-bottomのみ色を指定してみて下さい!
CSSのborderで三角形ができる仕組み
それでは、CSSのborderで三角形ができる仕組みについて解説していきます。
まずは、四方のボーダーが色違いの四角形を作成してみてください。
.triangle2 {
display: block;
width: 100px;
height: 100px;
border-top: 50px solid #5F939A;
border-right: 50px solid #A0937D;
border-bottom: 50px solid #3A6351;
border-left: 50px solid #F2EDD7;
}
次にwidthとheightを0にします。
.triangle3 {
display: block;
width: 0;
height: 0;
border-top: 50px solid #5F939A;
border-right: 50px solid #A0937D;
border-bottom: 50px solid #3A6351;
border-left: 50px solid #F2EDD7;
}
中の要素がない場合、四方のborderが三角形になります。
最後に、不要な部分をtransparentで透明にすることで、三角形の図形が出来上がります。
.triangle4 {
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #3A6351;
border-left: 50px solid transparent;
}
ちなみに、以下のようにすると、右下向きの三角形を作成できます。
.triangle5 {
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #3A6351;
border-left: 50px solid #F2EDD7;
}
CSSで三角形を作成する場面は意外と多いです。
今回の記事が参考になれば嬉しいです。
POINT
-
安心して相談できるコーディング代行会社をお探しでしたら、ジェットコーディングにご相談ください。
情報満載のコーディング部ログ!
Aug142021
CSSで三角形を作成する方法(基礎編)
今回はCSSのborderプロパティで三角形を作成する方法についてご紹介します。 色違い...
続きを読む
Jul212021
ジェットコーディングの営業日に関するお知らせ
ジェットコーディングは、土日祝日も休まず営業中! 7/22(木)~25(日)も稼働してま...
続きを読む
Jul182021
【WEBデザインの注意点】フォントサイズは10px以上に!
コーディングしやすいWEBデザイン【フォントサイズ編】 コーディング代行会社「ジェットコ...
続きを読む
Jul 32021
コーディング代行会社?Web制作会社?フリーランス?【外注先の3つの選択肢】
コーディング代行・外注先の選択肢は? この記事は、コーディングの代行・外注先をお探しの方...
続きを読む