今日の朝活(CSSで歪んだ円+ブレンドモード+アニメーション)

おはようございます。
湘南・茅ヶ崎のホームページ制作会社 VIVIBOND(ヴィヴィボンド)のミナベ(@desco_dayo)です。
よく見かけるCSSの実装をしてみます。
◆四角形の角をデザインしてみる
◆円を歪ませて更に少しだけ重ねてみる
今回参考にさせていただいた元記事
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!
感想
コンテンツ内でちょっとアクセントをつけたいときに便利な実装ですね。
歪ませて少し重ねた描写で要素を横並びにさせるのに「display: flex;」を使っていますが、このCSSすごく便利ですね!