Wie erstellt man Maulwurfshügelform in CSS?

-7

Ich habe eine Kundenanfrage, eine umgedrehte Maulwurfshügel Form unter dem Header auf ihrer Website zu erstellen.Wie erstellt man Maulwurfshügelform in CSS?

Bitte siehe unten. Und ich weiß, was du denkst, "Dang Mann, deine Malfähigkeiten sind episch, bitte lehre mich". Meine Antwort darauf lautet: "Diese Fähigkeiten können nicht vermittelt werden".

Ich habe versucht, mehrere Dinge zu versuchen, um dies zu arbeiten, und waren nicht erfolgreich.

Quelle

2016-04-06 Tony D.

Dang, überprüfen Sie, dass Anti-Aliasing! Kannst du uns zu einem anderen, nicht damit zusammenhängenden Thema einen Code zur Verfügung stellen, mit dem du ein solches Kunststück versuchen kannst? Das würde uns definitiv helfen. – chazsolo

Was hast du bisher genau ausprobiert? Was hat nicht funktioniert? Ein Hintergrundbild hinzufügen? – Pierre

Lesen Sie zuerst das benötigte Material ein, bevor Sie Fragen stellen. Zeigen Sie, was Sie als @Pierre bereits erwähnt versucht haben. Was Sie brauchen, ist CSS-Maskierung. Es gibt viele Tutorials im Internet, zB: http://www.html5rocks.com/en/tutorials/masking/adobe/. Nachdem Sie es versucht haben und immer noch versagen, zeigen Sie es als Ihren Code an. Danach werden die Leute helfen! –

Paulie_D Wie erwähnt, mit einer inline SVG diese Form machen, ist trivial. Im folgenden Beispiel habe ich ein Pfadelement mit 2 bezier curve commands:

svg{ 
 
    display:block; 
 
    width:30%; 
 
    margin:0 auto; 
 
}

<svg viewbox="0 0 10 5"> 
 
    <path fill="#FF7F27" d="M10 0 C7.5 0 7.5 5 5 5 S2.5 0 0 0z" /> 
 
</svg>

Auf einer seitlichen Anmerkung, können Sie hier sehen, wie Doppelkurven in CSS Ausrichtung für ein Aufwand ist im Vergleich zu SVG: CSS - Double curved shape.

Quelle

2016-04-06 15:30:09

Wie erstellt man Maulwurfshügelform in CSS?

Antwort

Verwandte Themen