Das obige Bild ist das, was ich zu erstellen versuche, aber ich habe einige Schwierigkeiten mit der ovalen Form. Eine Erklärung:

Die Menüleiste ist ein Div mit einem leichten linearen Farbverlauf (dunkelgrau bis transparent hellgrau).Das Firmenlogo hat einen transparenten Hintergrund und befindet sich oben in der MenüleisteDer ovale Ausschnitt muss mit dem Oval des Logos übereinstimmen und eine transparente Lücke dazwischen haben, die die Hintergrundfarbe anzeigt (dies ändert sich auf jeder Seite, Orange ist nur ein Beispiel).

Ich habe es viele Male mit einem radialen Farbverlauf versucht und bin dabei gescheitert. Ich konnte einen Kreis ausschneiden, aber nicht herausfinden, wie ich ihn oval machen kann, und konnte dann den linearen Farbverlauf nicht zum Laufen bringen. Siehe Code:

.circle {
    height: 10em;
    background: radial-gradient(circle 50px at 50% 100%, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
    background: -webkit-radial-gradient(50% 100%, circle, transparent 50px, rgba(84, 82, 94, 0.8) 50px);
}

Wenn die Ausschnittsform und der Verlauf sortiert sind, wird das Logo über der Oberseite positioniert.

Anregungen oder Jsfiddle-Lösungen wäre dankbar, danke!

EDIT: jsfiddleHier

EDIT 2: Habe das Problem durch eine leichte Änderung des Designs gelöst, danke an diejenigen, die geantwortet haben. Ich habe eine Abfrage geschrieben, um dieses Problem zu lösen. Wenn der farbige Bereich nicht mehr sichtbar ist, werden der ovale Rand und der Kopfbereich die Farbe des oberen Abschnitts anstelle der Transparenz wiedergeben.