Last-Modified: 2021/01/18

CSSで三角形を作る方法【現役エンジニアが解説】

PROGRAM

今回は、CSSで三角形を作る方法について、各向きに分け、簡単に解説していきます。

上向き、下向き

上向きと下向きの三角形はborderで描けます。

左右のborderを透明にし、上向きは下、下向きは上のborderを着色します。

.triangle{
    width:0;
    height:0;
    /* 上向きの場合 */
    border-bottom:50px solid red;
    /* 下向きの場合 */
    /* border-top:50px solid red; */
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}

上記のコードでは、triangleのクラスの要素に、borderを使うことで上向きや下向きの三角形を表現しています。

左向き、右向き

左向きと右向きの三角形もborderで表現可能です。

上下のborderを透明にし、左向きは右、右向きは左のborderに色を付けます。

.triangle{
    width:0;
    height:0;
    /* 左向き */
    border-right:50px solid green;
    /* 右向き */
    /* border-left:50px solid green; */
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
}

上記のコードでは、triangleのクラスを持つ要素に対し、borderを使用することで左向きや右向きの三角形を表現しています。

三角形二か所分

二か所分の三角形を描く場合もborderで表現します。

表示する二か所のうちいずれかを着色し、着色していない部分の反対の部分を透明にします。

.triangle{
    width:0;
    height:0;
    /* 左上向き */
    border-left:50px solid blue;
    border-bottom:50px solid transparent;
  
    /* 右上向き */
    border-right:50px solid blue;
    border-bottom:50px solid transparent;
  
    /* 右下向き */
    border-right:50px solid blue;
    border-top:50px solid transparent;
  
    /* 左下向き */
    border-left:50px solid blue;
    border-top:50px solid transparent;
}

上記のコードでは、triangleというクラスを持つ要素に対し、borderを指定することでそれぞれ二か所分の三角形を表現しています。

• facebook
• Tweet
• Read Later