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 ;
}
「吹き出し」の尖った部分などにも使えそうです。
こんな矢印も作れます。
