デモから。
See the Pen
PozbeVW by momoi (@momoi)
on CodePen.
span {
display: block;
width: 12px;
height: 12px;
border: 0px;
border-top: solid 4px #000;
border-right: solid 4px #000;
transform: rotate(45deg); /* 右向きの場合 */
}
やっていることはこんな感じ。
- width, heightに同じ大きさを指定して四角を作る
- borderを0に設定し、枠をなくす
- 上と右のみにborderを設定して三角を作る
- transformで向きを傾ける
矢印の向きは、transform: rotate(45deg)の角度をいじったら変えられます。
下向きのくの字
transform: rotate(135deg);
左向きのくの字
transform: rotate(-135deg);
上向きのくの字
transform: rotate(-45deg);