インナーからはみだす背景色

インナーから背景色をはみ出させたい時、
よくある方法は、半分ずらして半分戻すコレ。”calc(50% – 50vw)”

でもこれだと、vw単位を使うせいで横スクロールバーが出現しちゃうんですよね。
それなら、overflow:hidden;を使ったらいいのですが・・・

私の働く会社では、「vw単位とoverflow:hidden;を基本使わないように」っていうルールがありまして、、以下省略。

box-shadowを使って、背景色をはみ出させる！

box-shadowを使う方法だと、以下の2行で書けちゃいます。


  box-shadow:0 0 0 100vmax #111;
  clip-path:inset(0 -100vmax);

```
box-shadow:0 0 0 100vmax #111;
```
box-shadowで、#111の色の100vmaxの大きさの影の広がりを作る。
この時、水平方向・垂直方向の値は0なので、中心から均等に上下左右の影が作られる。
```
clip-path:inset(0 -100vmax);
```
clip-pathで左右の影を残したまま、上下の影を切り取る。

全方向に影を広げて、あとで上下の影を切る！という考え方です。
簡単で、使いやすく、いろんな場面で使えるので、ぜひ使ってみてください。