Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年7月26日 Web制作

CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる


cssTriangle割と使えるかも?
タイトルの通り、CSSのみで「三角形」を作るチュートリアルです。borderプロパティにこんな使い方があったとは…

それでは、サクッと作ってみましょう。

三角の作り方

CSSのborderプロパティを使えば、簡単に三角が作れます。
言葉だと説明が難しいので、とりあえずサンプルを見てください。
高さと横幅のないブロック要素にborderを指定し、まず全てのborderを透過(transparent)します。その後border-topに色を与えてあげると、下向きの三角形の出来上がりです。各borderの挙動は以下の通り。 sankaku1 試しに、全てのborderに色を付けてみると…
だいぶ分かりやすくなったような気がします。
それでは、この技を使って色々な三角形を作ってみましょう。

縦長な三角形

左右のborderのみ太さを80px→30pxにしてみました。こうすれば、必然的に三角形(border-top)の横幅が狭くなります。

今度は横長な三角形

さっきの逆のことをやっただけなので説明は省略します。

扇型も作れる!

border-radiusを指定することで扇形も作れちゃいました。使い所は無さそうですが…

吹き出しを作ってみる

テキスト

擬似要素を使って三角形を作り、右下に置いてみました。画像を使わずに吹き出しが作れるってのはなかなか面白いですね!

枠が付いた吹き出しを作ってみる

テキスト

仕組みは簡単。beforeとafterで生成した白と黒の三角形を、少しずらして配置しただけです。

以上、CSSでの三角形の作り方でした。色々応用して遊んでみてください!
関連するかもしれない記事