CSSだけで三角形を表示する

CSSだけを使って三角形を表示する方法があるようです。 なかなかに目からウロコなテクニックです。

Using borders to produce angled shapes (CSS tutorial)

ポイントは太い枠線の使い方です。 太い幅の、上側と左側のように隣り合う枠線を別の色で塗ります。

.triangular {
    border-left : solid 20px red ;
    border-top  : solid 20px blue ;
}

これを表示すると↓のようになります。

←↑は枠線

左上の部分が斜めになっています。 これを利用するわけです。

.triangular {
    width       : 0px;
    line-height : 0% ;
    font-size   : 0px ; 
    border-left : solid 20px red ;
    border-top  : solid 20px blue ;
}

こんな感じで幅を消すと↓のようになります。


片方の色を背景と同じにすると↓のようになります。


左側・上側・右側を上手く使うと ↓のようになります。


これは次のような指定をしています。

.triangular {
    width        : 0px;
    line-height  : 0% ;
    font-size    : 0px ; 
    border-left  : solid 10px white ;
    border-top   : solid 20px gray ;
    border-right : solid 10px white ;
}


「吹き出し」の尖った部分などにも使えそうです。



こんな矢印も作れます。

Google サイト内検索

Amazonアソシエイト