CSSCSSだけでできる!三角形の作り方と仕組みについて解説ryo2018/10/162019/7/6この記事ではCSSで三角形を作る方法について解説します!WebのデザインではCSSを使って色々な形をつくっていきます。CSSでborderの使い方を知りたい。三角形や矢印を作りたい。矢印の作り方について解説していきます。まとめ三角形が使われる場面WEBサイトではいろんな場面で三角形を活用することができますよね。スクロールを求める部分。逆三角形を配置することで、「ここでスクロールしてください」という意味がより明確になりますね。他にも、パンくずリストと呼ばれる、サイトの中での現在地を示すリストでも活躍してくれます。応用して吹き出しや矢印など、三角形そのものとして使われていなくても、三角形が要素の一つとして使われていることもよくあります。このように、様々な場面で三角形は大活躍なのです。三角形の作り方それではさっそく三角形を作っていきましょう。一般的な三角形の作り方まずは一般的な三角形から作っていきましょう。こちらのコードをご覧ください。class="triangle"></div></body>実行結果この三角形はborderのテクニックを使って作られています。CSSで作る三角形の仕組みそれぞれのborderでは50pxの長さで、solidという線の種類、その後は色や透過の具合など、要素の枠を設定しています。試しに、どちらかのtransparentを消してみましょう。実行結果このようになりました。border-rightとborder-leftにはtransparentが適用されて、透過されていることがわかりましたね。このように三角形の底辺にしたい向きのborderを設定して、その両端のborderを透過するように設定をすることで三角形を作ることができました。borderの基本的な使い方については、こちらの記事をご覧ください。矢印の作り方それでは次に矢印も作ってみましょう。こちらのコードをご覧ください。class="triangle"></div></body>ここでは::afterという疑似要素を使っています。この疑似要素は、要素の(ここでは「.triangle」)の直後に内容を追加します。内容というのはcontentの部分ですがここでは空になっていますね。このような書き方はCSSでよく出てくるので知っておきましょう。それぞれ、「.triangle」では長方形の部分を、「.trinagle::before」では三角形の部分を作っています。長方形の部分でborderを使っていないじゃないかと思う方もいるかもしれませんが、ここではbackground-colorで要素そのものの背景として適用させています。まとめこの記事ではCSSを使って三角形、矢印を作る方法について解説してきました。三角形や矢印にかかわらず、CSSで図形を作る基本的な方法については分かって頂けたでしょうか?三角形や矢印はCSSで作るパーツの基本的なものになります。皆さんもぜひ、CSSでパーツを作ってみてはいかがでしょう。TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。