見るツイート皆さんは、CSSだけで三角形のような図形を表現出来ることを知っていますか?調べてみると、三角形の作り方を解説している記事が沢山あります。普通の三角形を作る方法は多くありますが、実際どのような場面で使うのかを解説しているものは、少ないような気がしました。そのため、私が個人的にこんな場面で使えるのでは?といったものをまとめてみましたので、ご紹介したいと思います。標準ブラウザ※PCでも表示はされていますが、動作検証は不十分なのでPCで使用する際は注意してください。色やサイズの調整が簡単に出来る。画像分の容量を削減出来る。スライスの手間が減る。地味ですが、スライスの手間が減るのは結構うれしいです。中央寄せに使用*/17}擬似要素であるafter要素のボーダーを使用して作成します。今回は下側のボーダー以外を透過することで、上向きの三角形を表現できます。leftを半分、margin-leftをボーダーの長さ分マイナスで指定し、三角形を中央寄せにしています。rgba(0,0,0,0.5));上の二行を追加するだけで、影が付きます!(.triangle:afterに追加してください。)box-shadowとは違い、表示されている領域そのもの(この場合三角形)に影が作られるようになっています。Chromeとsafari6以降しか現在は対応されていないそうです。Android全般とiOS5では表示されませんでしたが、iOS6、iOS7では表示されます。使用例その1:矢印に使うさて、基本的な三角形の作り方がわかった所で本題の使用例に移りたいと思います。見かける矢印の解説です。ただの矢印ではなく、グラデーションをかけて徐々に下へ遷移している形を表現しています。空divを作ってしまうとマークアップとしては美しくありませんので、before/after擬似要素を使い必要最低限のマークアップで作る方法を紹介していきます。rgb(255,255,255);42}今回はbefore要素で四角形のボックスを作っているのがポイントです。三角形のtopを四角形の高さと同じに指定することで、四角形の下に表示されます。グラデーションをかけた四角形の下に、下向きの三角形を置いているというイメージですね。三角形の角度を緩くするためにborder-topの高さを短く指定しています。rgb(255,255,255);31}横向きの矢印の場合、四角形の要素の横に三角形を作るイメージになります。leftを50%に指定して一旦中央へ寄せ、margin-leftで四角形の半分右へ移動させることで、ちょうど右側へ付くようになります。使用例その2:フロー図に使う次は三角形を利用した、フロー図のご紹介をします。*/33}このフロー図は何も難しいことをしていません。ボックスの下に三角形を作っていますが、その際三角形の高さとボックスのボーダーを足したものをマイナスにして、bottomを指定します。後は最後のボックスだけ三角形を表示しない指定をすればOKです。【補足ポイント】横バージョンスマートフォンにおいては、あまり使える機会はないかもしれませんが、こちらもご紹介します。横の遷移図を表現する際に使用します。*/60}このフロー図は、まず横並びのボックスを作ります。そのボックスの左側に合わせて、前の要素の色と同じ三角形を乗せるイメージです。ボックスの外に三角形を作り、次の要素に重ねる方法もありますが、その場合z-indexの指定が少々面倒だと感じたのでこちらの方法を紹介しています。活用例その3:比較図に使うビフォーとアフターなどを比較する際に使える図形です。right;49}比較図の場合は、全体を囲うボックスの中央に三角形を表示させます。後は中のボックスを左右にfloatさせるだけです。※中のボックスの幅をあまり大きくしてしまうと、三角形と重なってしまうので注意が必要です。活用例その4:吹き出しに使う最後に吹き出しに使う三角形の紹介をします。*/35}吹き出しも基本的には今までと変わったところはありません。他のものと同じようにボックスの下に三角形を作ります。今回は三角形を2つ用意し、三角形に枠が付いているように見せているのがポイントです。最後に今回はこれで終わりになります。いかがでしたか?私はこの記事を書くにあたって、色々と調べたり、テストしたりしました。そこで個人的に思ったのは、「スタイルシートって面白い!」ってことでした。皆さまもこの機会に、興味を持ってもらえたらとっても嬉しいです。今回は使用例としてご紹介致しましたが、自分の知識を高めるためや、これ作った俺すげー!のために色々と「実際に作ってみる」ことを是非オススメします!ご拝読ありがとうございました。»HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。upコンテンツコラムの新着情報を受け取るクロノドライブのTwitterアカウントをフォローして、新着コラム情報を受け取ることができます。