CSSで三角形をつくる方法

吹き出しに使われている三角の部分や、矢印など、今まで画像でやってた方もCSSでやってみませんか？
今回は一番シンプルな三角形を作ってみます！

目次

• １.三角がどこで使われているか見てみよう
• ２.borderの特性を知ろう
• ３.三角を作ってみよう
• ４.まとめ

三角がどこで使われているか見てみよう

例えばボタンの三角矢印だったり、動画などの再生ボタンで使われていたり。
この例以外のところでも三角が使われています。

borderの特性を知ろう

まずは、空のボックスを作って、太さ30pxの枠線をひいてみましょう。

    <div class="sample01"></div>

    .sample01{
      width: 80px;
      height: 80px;
      border-width: 30px;
      border-style: solid;
      border-color: #fdd35c #00ac97;
    }

    

線と線の交わる部分が、斜めに区切られているのに気づきましたか？
これが重要なポイントです。

三角を作ってみよう

次に、先ほど指定した「高さ・横幅」をそれぞれ0にしてみます。
すると、三角が4つになります。

  <div class="sample02"></div>

  .sample02{
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-color: #fdd35c #00ac97;
  }

  

あとは、不必要な部分の三角を消すだけです。
今回は右向きの三角を作りたいので、border-top,right,bottomのカラーを透明(transparent)にすると、完成！

  <div class="sample03"></div>

  .sample03{
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    /* 上　右　下　左　の順番で指定  */
    border-color: transparent transparent transparent #00ac97;
  }

  

まとめ

うまくできましたか？
基本がわかれば、角度を変えてみたり、各辺のサイズを変えて微調整もできます。
CSSの場合は、色の変更やサイズ調整にも強いので、ぜひ覚えてみてください。