CSSでボックスの角にだけ色をつけたい

divのボックスの角にだけ色をつけたいと思い、cssをいじってみました。

参考になるソースを以下に記載します。

linear-gradientを使ってグラデーションを表現しました。

色をつけたい位置によって直線の角度を変える場合

• 左上 135deg
• 左下 45deg
• 右上 -135deg
• 右下 -45deg

See the Pen Untitled by omoto (@o-mo-t) on CodePen.

---

.diagonal-shadow {
  position: relative;
  height:200px;
}

.diagonal-shadow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  background: linear-gradient(
    135deg, 
    rgba(255, 0, 0, 1), 
    transparent 20px
  );
  border: 1px solid black;
  z-index: -1;
}