CSSで複雑な図形で画像をトリミングしたい

Question

CSSで↑の図のような角丸の図形を作りたいのですが、やり方が分かりません。

考えた方法は２つで、

１つ目は上図のように赤枠部分を灰色枠部分の上に重ね、
赤枠の前後に青枠部分を付けるという方法なのですが、青枠部分の作り方が分かりません・・・。
（https://9-bb.com/%E8%A7%92%E3%81%8C%E4%B8%B8%E3%81%8F%E3%81%88%E3%81%90%E3%82%89%E3%82%8C%E3%81%9F%E6%84%9F%E3%81%98%E3%81%AE%E3%82%AB%E3%83%BC%E3%83%89%E3%82%92css%E3%81%AE%E3%81%BF%E3%81%A7%E4%BD%9C%E3%82%8B/
この辺りとか近いのでしょうか・・・？）
青枠部分をsvgで付けるのが早いでしょうか？

clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0 100%, 0 59%, 10% 59%);
2つ目は上記のように、clip-pathで作成する方法ですが、この場合だとpolygonには角丸を付けられないようです。

分かる方いらっしゃいましたら、教えて頂けますと幸いです。

Answer 1

1つ目の方法でsvgで解決しました