課題
CSSでボックスの左上にだけ色をつけたい
対応
linear-gradient を利用する。もともとはある角度で複数の色をグラデーションさせる機能だが、パラメータによってはくっきりと別れさせることもできる
色をつけたい位置によって直線の角度を変える
- 左上 135deg
- 左下 45deg
- 右上 -135deg
- 右下 -45deg
ついでに角丸も
background: 8dp 0 0 0, linear-gradient(135deg, red 18px, transparent 0); border-radius: 8px;
参考
昔購入したやつだけど、読んでみたら詳しくて良い本だった。
