第10回MLCマークアップ部お題のスクープ型ボックスをCSSマスクで再現した話 | フロントエンドBlog | ミツエーリンクス

先日社内で開催された第10回MLCマークアップ部の総評の中で、「お題のボックス部分はどのように再現するか」という問いかけがありました。 筆者は当初SVGでマスクを適用して再現する想定だったのですが、CSSのみではどのように再現するのだろうかと思い実際に作成してみることにしました。 再現の方針策定 マークアップ部のお題から今回再現したい部分を抽出したキャプチャを用意しました。 デザインを観察してみると、背景がてっくらうんじちゃんのシルエットのパターンになっているため単に疑似要素で背景色と同色の丸を四隅に作成し被せるという方法は採用できません。 CSS Backgrounds and Borders Module Level 4の中のCorner Shapingがまさしく今回の要件に該当するのですが、仕様がEditor's Draftの段階で2019年1月現在ではどのブラウザにも実装されていな