問題タブ [border-radius]

曲線の境界線を持つ div 内に画像をレンダリングしようとしていました。両方の境界線の半径と寸法が同じであるにも関わらず、画像が div を完全に埋めないという問題が発生しています。

div内の画像をレンダリングする方法は次のとおりです

そしてここにcssクラスがあります

ライブコードサンドボックス環境 リンクへのリンクは次のとおりです

誰かがそのようなソフトボーダー半径を行う方法を知っています:

Flutterでも可能ですか、方法がわかりません。

https://faylette.github.io/3-column-preview-card-component-main/

私はこれに取り組んでおり、含まれている要素に境界線の半径を適用しようとしていますが、表示されますが、要素がブラウザーの端に触れた場合にのみ表示されます。これは、フレックス方向が行または列のどちらであるかに関係なく発生します。

ブラウザの端に触れていないときに境界線の半径が消える

ブラウザの端に触れたときに境界線の半径が希望どおりに表示される

関連する CSS コードは次のとおりです。

これを修正する方法を教えてください。また、これがスタック オーバーフローに関する私の最初の投稿であるため、この質問をする際に何か問題があった場合はお知らせください。ありがとうございました！

.container以下のスニペットの例では、要素の最後の子に と同じborder-radiusものを課そうとしています.container。これにより、ホバリング時に最後の子が強調表示されたときに、その背景が親の形状に従います。これは、ピクセルに関して設定したこの特定のケースではかなりうまくいくようです。border-radius

ただし、emたとえば の2em代わりにs を使用すると、次の20pxように壊れます。

これは、親の曲率が最後の子の高さよりも高く伸びているためだと思います。実際に変更20pxすると、次の50pxようになります。

したがって、私20pxは幸運であり、border-radius子を親の形に従わせようとする継承の全体的なアプローチは間違っていると思います。実際、 の最後の例では50px、では取得できない2 番目のエントリをトリミングする必要がありますborder-radius。

代わりにどうすればいいですか？

私は以前にcssの質問をしたことがないので、事前にお詫び申し上げます。

これは私のナビゲーションバーが現在フルサイズの画像のように見えるものです

私が本当に達成したい2つのこと：

1. 現在のタブのすぐ上と下にある一連のタブ
   (この図では、 [提案]と[会社概要] になります)
2. 現在のタブを除いて右側のナビゲーション バーに影を付ける

（私はjinja2を使用しています。現在のタブが固定されていないため、コーナーをハードコーディングできません）

1.についてはわかりませんが、2.を試してみましたが、これは満足のいく結果ではありません:

急激なコーナーを取り除きたい

これは私の現在のスタイルシートです

これはlayout.htmlです

そしてこれはnavigation.html