こういうデザイン (Augmented UI? 拡張 UI？) を CSS で実装する方法

BRANK

はじめに言葉では説明しにくいので、以下の画像を見ていただいたほうが早いです。このように、画像の一部が切り抜かれたようなデザイン。このようなデザインを指す特定な名称は見つかりませんでしたが、個人的には Augmented UI (拡張 UI) がもっとも近いような気がします。Augmented UIAugmented UI とは、サイバーパンクなどでよく見る以下のような形を CSS で再現するライブラリの名称です。augmented-ui - Integrate your apps with technology Augmented UI なのかについて個人的に考えてみました。Augmented とは AR (Augmented Reality = 拡張現実) の「A」の部分です。この画像を見ると確かに AR デバイスの視界って augmented-ui の形になってますね！ここから発展したんじゃないかなと。しかし残念ながら、augmented-ui では最初のデザインを再現することはできません。実装方法前置きが長くなりましたが、実装方法について解説していきます。よくあるやり方全体の背景色と同じ色をテキスト部分の背景に指定し、同じ色の赤い部分をくっつければ完成です。しかし見てのとおり、この方法は単色の背景にしか使えません。まずは切り抜き部分を固定サイズでhtml<div> …