HTML/CSS

【CSS】三角形の作り方!初級編+応用編

投稿日:

CSS三角形の作り方

前回の【CSS】タグ風矢印の作り方!でも使用した、CSSで作る三角形の作り方と原理を説明します。

前回はタグでしたが、吹き出しでもよく使われていますね。

 

普段コピペで済ませている方も多いのではないでしょうか?

三角形がどうやってできているのかをきちんと理解すれば、色々な使い方ができて便利ですのでさくっと覚えちゃいましょう!

 

 

CSSで作る基本の三角形

まずは基本の三角形です。

 

borderプロパティを使う

CSSの三角形はborderプロパティを使います。

他にも三角形を実現する方法はありますが、borderプロパティは吹き出しやタグのコーディングでよく使われています。

 

下記は、100pxの正方形に50pxのボーダーを指定した例です。

ボーダーはわかりやすく、上下左右で色を変えています。

ボーダー同士が接触するコーナー部分が斜めになっているのがわかりますね。

See the Pen triangle_1 by YUU (@webjo_yuu) on CodePen.

 

HTMLはBOX用です。

 

つづいてCSS。

50pxのボーダーとBOXの縦横の幅を指定しています。

基本の三角形の場合は、 border-color を別指定にしておくと調整しやすいです。

 

widthとheightを0にする

ここから三角形にするには、先ほど100pxだった正方形を0pxに変更します。

すると、上下左右のボーダーがぶつかりあって、三角形が4つ組み合わさった形になりました。

さらに、この時の三角形の高さは、ボーダーの幅である50pxとなることがわかりますね。

See the Pen triangle_2 by YUU (@webjo_yuu) on CodePen.

 

CSSのheightとwidthを0に変更しています。(0の場合、pxなどの単位は書きません)

 

cssで作る三角形

 

残したい方向のボーダー以外を透明化する

上下左右のどちらかを向いたシンプルな三角形であれば、使いたい方向のボーダー以外を透明化し三角形を1つだけ残せば簡単に作ることができます。

今回は、青色の border-right を残してみましょう。

See the Pen triangle_3 by YUU (@webjo_yuu) on CodePen.

 

比較用にBOXを3つに増やしました。

 

CSSの変更部分。今回は比較用として3番目のBOXに追加しています。

 

下の図はわかりやすく色を分けたものです。

残したい「青色のボーダー」以外をグレーにしました。

このグレーの位置にある「上・下・左」のボーダー色をそれぞれ透明にすればOKです。

cssで作る三角形

 

簡単にできましたね!

 

CSSで作る三角形 ~応用編~

応用編です。

プロパティ値を変更して、適切な形で使用できるようにします。

 

border-widthとの関係

三角形は border-width で構成されていますので、border-widthがなくなれば当然、要素も存在しなくなります。

下の図はborderの領域と、「基本編の三角形からborder-top-widthの値を0にしたらどうなるか」を表しています。

 

cssで作る三角形

 

三角形の底辺の長さや高さはすべてborder-widthプロパティに影響を受けていますので、border-widthを0にすると指定の領域がごそっとなくなります

これにより、三角形の形が変わります。

※上の図では、border-width: 50px;で構成されていた三角形にborder-top-width: 0;を指定しています。

 

これを応用すれば、色々な形が実現できます。

See the Pen triangle_4 by YUU (@webjo_yuu) on CodePen.

 

三角形の高さを変える

三角形の高さを変えたい場合は、特定のborderの高さのみを変更すればOKです。

試しにborder-width: 50px;の三角形で、border-right-width: 200px;を追加指定してみます。

See the Pen triangle_6 by YUU (@webjo_yuu) on CodePen.

 

※わかりやすく色をつけています。

右側の三角形(border-right)の高さが変わっていますね。

吹き出しやタグに合わせて更に柔軟に使えそうです。

 

border-colorを2カ所に指定

border-colorを上・右などの2カ所に指定すれば、斜め45度の三角形も簡単に作ることができます。

See the Pen triangle_5 by YUU (@webjo_yuu) on CodePen.

 

あとがき

今回の解説は以上です!

CSSを有効活用して、サイトのデザイン性を高めていきましょう~

 

-HTML/CSS
-, ,

Copyright© Webjo blog , 2020 All Rights Reserved.