Die Kraft von CSS: Bilder mit einem Div zeichnen

Diese Bilder werden alle mit einem DIV gezeichnet. Tatsächlich ist das Prinzip nicht kompliziert.

Diese Bilder werden von CSS gezeichnet und durch Hintergrundbildüberlagerung implementiert,

wie Pilzköpfe Die Implementierung wird durch Überlagerung eines radialen Gradienten und eines linearen Gradienten realisiert. Zum Beispiel:

p {
  width: 170px;
  height: 140px;
  background-image:
        radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
        linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
        radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
        radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
        border-radius: 140px 140px 80px 80px;
}

Gleichzeitig besteht eine vordere und hintere Okklusionsbeziehung durch das Hintergrundbild von :before und :nach Pseudoelementen erreichen.

Online-Demonstration: http://jsfiddle.net/ourjs/ed0ayybo/

PS: Diese Methode unterstützt die alte Version von IE nicht vollständig

Originaladresse: http : //a.singlep.com/?utm_source=ourjs.com