【CSS】CSSで再現できるオシャレカードデザイン

こんにちは、ワタナベです。

今回はCSSを駆使して再現できる、カードデザインを備忘録としてご紹介。

Cards with inverted border-radius #scss

画像と矢印の部分、SVGやclip-pathではなく、CSSで再現されています。

どのようにやっているかというと、疑似要素でborderやbox-shadow等を駆使して逆角丸を作って再現しています。
ぼちぼちこのようなデザインを見かけることはありますが、SVGやclip-pathで作られてることが多いのでCSSで再現できるのに驚きました！

背景がグラデーションや、画像とかだとこの方法は厳しいですが、単色であればCSSのみで実装可能なこの方法はかなり魅力的ですね。
カードデザインだけでなく、こういうテクニックを多用したサイト結構好きなので自分も参考にしたいと思いました(*^^*)

逆角丸の作り方はこちらの記事から↓

それではまた次回。

ご閲覧ありがとうございました！