• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

CSSで三角形をつくる方法

投稿者アイコン
2018/05/23
書いた人:
rurippa!
カテゴリ:
CSS   Web制作
16,066 views

矢印や吹き出し部分でよく見る三角形をCSSで作ってみます!

CSSで三角形をつくる方法

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

目次

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

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

triangle01

borderの特性を知ろう

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


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

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

    

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

triangle_sampleimg01

三角を作ってみよう

次に、先ほど指定した「高さ・横幅」をそれぞれ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の場合は、色の変更やサイズ調整にも強いので、ぜひ覚えてみてください。


この記事を読んだ人はこんな記事も読んでいます