つばさのーと

つばさの日常を綴るのーと

CSSだけで三角形を作る仕組みを自分でしっかり考える

f:id:tsubasa123:20170209133917j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

知っている人からしたら何年前だよ、って突っ込まれるようなネタですが、実は仕組みをちゃんと理解せずにコピペで使っていたのでこれを機に仕組みを整理します。意外と応用がききそうなので基本はしっかり押さえたいものです。

 

まずはコードから

 

#triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-color: transparent;
    border-top-width: 50px;
    border-right-width: 50px;
    border-left-width: 50px;
    border-bottom-width: 50px;
    border-top-color: #000000;
    border-right-color: #ff0000;
    border-bottom-color: #00ff00;
    border-left-color: #0000ff;
}

 

こんな感じ。これで

 

 

こんな感じになります。わかったようなわからんような、って感じです。

 

順番に見ていけばわかるかも

 

いきなりだとわかりにくいので、順番に、というか、通常のボーダー的な使い方から段階的に確認してみます。まずは、単色、5pxのボーダーを指定。

 

#triangle {
    width: 50px;
    height: 50px;
    border-style: solid;
    border-top-width: 5px;
    border-top-color: #000000;
    border-right-width: 5px;
    border-right-color: #000000;
    border-bottom-width: 5px;
    border-bottom-color: #000000;
    border-left-width: 5px;
    border-left-color: #000000;
}

 

 

はい、これは普通。とくに難しいことはないです。四角い箱に枠線が付きます。次はこれの各辺の色を変更してみます。

 

#triangle {
    width: 50px;
    height: 50px;
    border-style: solid;
    border-top-width: 5px;
    border-top-color: #000000;
    border-right-width: 5px;
    border-right-color: #ff0000;
    border-bottom-width: 5px;
    border-bottom-color: #00ff00;
    border-left-width: 5px;
    border-left-color: #0000ff;
}

 

 

はい、これも普通。なんですが、四角の色が切り替わる部分が斜めになってきたことが確認できます。もう少し枠線を太くしてみます。

 

#triangle {
    width: 50px;
    height: 50px;
    border-style: solid;
    border-top-width: 30px;
    border-top-color: #000000;
    border-right-width: 30px;
    border-right-color: #ff0000;
    border-bottom-width: 30px;
    border-bottom-color: #00ff00;
    border-left-width: 30px;
    border-left-color: #0000ff;
}

 

 

線を太くしたことで、線の形が台形っぽくなってきました。太くすればするほどこの台形は大きくなります。ここまでくればもう仕組みは理解できてきましたね。最後に四角い箱の幅と高さを0にします。

 

#triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-top-width: 30px;
    border-top-color: #000000;
    border-right-width: 30px;
    border-right-color: #ff0000;
    border-bottom-width: 30px;
    border-bottom-color: #00ff00;
    border-left-width: 30px;
    border-left-color: #0000ff;
}

 

 

はい、三角形の完成です。ボーダーを上辺に指定すると下向きの三角形が、右辺に指定すると下向きの三角形を作ることができます。逆もまた然りですね。

 

ただし、実際にデザインで使う時はどれか1つだけだと思うので、その他の3辺には透明もしくは、背景色を利用して使うことになります。

 

#triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-width: 80px;
    border-right-width: 80px;
    border-bottom-width: 80px;
    border-left-width: 80px;
    border-top-color: #000000;
}

 

 

完成です。

 

どこで使う?

 

よく見るのは見出しのデザインでしょうか。私は変更してしまいましたが、当ブログのテーマ、「Brooklyn」でも大見出しやサイドバーの見出しで使われていますね。

 

このような使い方の場合はタグを入れ子にして増やすか、擬似要素を使ってそちらにボーダーを指定する必要があります。この辺はややこしくなるので割愛。使いたい人は調べてみてください。

 

さいごに

 

やっぱり自分で考えて、実際に手を動かしながら確認すると理解が捗りますね。さて、問題はこれをアレンジするアイデアが浮かばないことだ。参考サイトを探すたびに出ることにします。

 

ではでは、最後までお付き合いいただきありがとうございました。