スライドショー

CSSだけでできる!三角形の作り方と仕組みについて解説

この記事ではCSSで三角形を作る方法について解説します!WebのデザインではCSSを使って色々な形をつくっていきます。

CSSでborderの使い方を知りたい。
三角形や矢印を作りたい。

といった方に向けてこの記事では、

  • borderの使い方
  • 三角形の作り方
  • 矢印の作り方

について解説していきます。CSSで形を作る基本的なことについて解説をしていくのでぜひご覧ください!

三角形が使われる場面

WEBサイトではいろんな場面で三角形を活用することができますよね。例えば、スクロールを求める部分。逆三角形を配置することで、「ここでスクロールしてください」という意味がより明確になりますね。

他にも、パンくずリストと呼ばれる、サイトの中での現在地を示すリストでも活躍してくれます。さらに応用して吹き出しや矢印など、三角形そのものとして使われていなくても、三角形が要素の一つとして使われていることもよくあります。

このように、様々な場面で三角形は大活躍なのです。

三角形の作り方

それではさっそく三角形を作っていきましょう。

一般的な三角形の作り方

まずは一般的な三角形から作っていきましょう。こちらのコードをご覧ください。

<style>
    .triangle {
        width: 0;
    height: 0;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
        border-bottom: 50px solid #000;
    }
</style>
    
<body>
    <div class="triangle"></div>
</body>

実行結果

この三角形はborderのテクニックを使って作られています。

CSSで作る三角形の仕組み

それぞれのborderでは50pxの長さで、solidという線の種類、その後は色や透過の具合など、要素の枠を設定しています。試しに、どちらかのtransparentを消してみましょう。

実行結果

このようになりました。border-rightとborder-leftにはtransparentが適用されて、透過されていることがわかりましたね。次はborder-bottomをborder-topにしてみましょう。

実行結果

逆三角形になりましたね。このように三角形の底辺にしたい向きのborderを設定して、その両端のborderを透過するように設定をすることで三角形を作ることができました。borderの基本的な使い方については、こちらの記事をご覧ください。

矢印の作り方

それでは次に矢印も作ってみましょう。こちらのコードをご覧ください。

<style>
    .triangle {
        display: inline-block;
        position: relative;
        width: 50px;
        height: 40px;
        background-color: #000;
        top: 30px;
    }

    .triangle::after {
        position: absolute;
        content: "";
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-left: 50px solid #000;
        left: 50px;
        top: -30px;
    }
</style>
    
<body>
    <div class="triangle"></div>
</body>

ここでは::afterという疑似要素を使っています。この疑似要素は、要素の(ここでは「.triangle」)の直後に内容を追加します。内容というのはcontentの部分ですがここでは空になっていますね。

このような書き方はCSSでよく出てくるので知っておきましょう。それぞれ、「.triangle」では長方形の部分を、「.trinagle::before」では三角形の部分を作っています。

長方形の部分でborderを使っていないじゃないかと思う方もいるかもしれませんが、ここではbackground-colorで要素そのものの背景として適用させています。

まとめ

この記事ではCSSを使って三角形、矢印を作る方法について解説してきました。三角形や矢印にかかわらず、CSSで図形を作る基本的な方法については分かって頂けたでしょうか?

三角形や矢印はCSSで作るパーツの基本的なものになります。皆さんもぜひ、CSSでパーツを作ってみてはいかがでしょう。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説