問題タブ [css-gradients]

だから私はこのUIに取り組んでいて、メインのポートレートサークルから飛び出すようにアニメーション化しようと決心しました.私の唯一の問題は、一生この放射状グラデーションを滑らかにすることができないことです

全体の問題は、静止したときにポートレートサークルと一致するように、左側に反転したボーダー半径が必要であることから来ています。これを行うためのいくつかの異なる方法を見ましたが、私はかなり素人で、この放射状グラデーションが最も簡単な方法のように思えました。しかし、今では、この恐ろしいギザギザのエッジがすくわれた側が残っています.

円を使用する代わりにさまざまなグラデーション スタイルを見て、「Andreas Larsen の」「線形グラデーションの緩和」の投稿に頭を悩ませようとしましたが、役に立ちませんでした。

これは、UIを表示する必要なコードのみを含むJSFiddleです。誰かがそれを支援できれば、あなたが知っているよりも価値があります:)

編集:すべての不安定なバーとアイコンを無視して、修正しています:P 最初に放射状グラデーション セクションにマイク アイコンを設定しようとしています。

上記の「ハンドル」で「カレンダー」divのスタイルを設定しました。

これは、黒の背景で 2 div 3*3 px を設定し、相対位置である親 div 内のカレンダー div の上部の正確な位置にそれらを配置して作成されます。

このカレンダーは、画像の上の絶対位置にあります。

これは機能しますが、「ハンドル」が同じ場所に留まり、カレンダーの上部境界線が移動できるため、カレンダー div のすべての変更が表示を壊すため、非常に「ハードコード」されているように感じます。

カレンダー div 自体の上に同じ「ハンドル」スタイルを取得して、カレンダー CSS の高さの変更が「ハンドル」に影響しないようにするにはどうすればよいですか?