Beispielcode, der gängige Grafikeffekte in CSS-Stilen zeigt

/*Quadrat*/
   .Quadrat {
      Breite: 60px;
      Höhe: 60px;
      Hintergrund: rot;
   }

/*Kreis*/ /* Sie können Prozentwerte (größer als 30 %) verwenden, aber niedrigere Versionen von Android unterstützen dies nicht*/
   .Kreis {
      Breite: 60px;
      Höhe: 60px;
      Hintergrund: rot;
      -moz-Randradius: 30px;
      -Webkit-Randradius: 30px;
      Rahmenradius: 30px;
   }

/*Gleichseitiges Dreieck*/
   .Dreieck-nach-oben {
      Breite: 0;
      Rand: 30px durchgehend rot;
      Rahmen links: 30px durchgezogen rgba(0, 0, 0, 0);
      Rahmen rechts: 30px durchgezogen rgba(0, 0, 0, 0);
      Rahmen oben: 30px durchgezogen rgba(0, 0, 0, 0);
      /*Rahmen unten: 30px durchgezogen rgba(0, 0, 0, 0);*/
   }

/*Umgekehrtes Dreieck*/
   .dreieck-nach-unten {
      Breite: 0;
      Rand: 30px durchgehend rot;
      Rahmen links: 30px durchgezogen rgba(0, 0, 0, 0);
      Rahmen rechts: 30px durchgezogen rgba(0, 0, 0, 0);
      /*Rahmen oben: 30px durchgezogen rgba(0, 0, 0, 0);*/
      Rahmen unten: 30px durchgezogen rgba(0, 0, 0, 0);
   }

/* Trapez*/
   .trapez {
      Rahmen unten: 60px durchgehend rot;
      Rahmen links: 30px durchgehend transparent;
      Rahmen rechts: 30px durchgehend transparent;
      Höhe: 0;
      Breite: 60px;
   }

/*Parallelogramm*/
   .parallelogram {
      Breite: 100px;
      Höhe: 60px;
      -webkit-transform: Schrägstellung (20 Grad);
      -moz-transform:skew(20 Grad);
      -o-transform: Schrägstellung (20 Grad);
      Hintergrund: rot;
   }

/*Pentagon*/
   .Fünfeck {
      Rand oben: 30px;
      Position: relativ;
      Breite: 54px;
      Rahmenbreite: 50px 18px 0;
      Rahmenstil: durchgezogen;
      Rahmenfarbe: rot transparent;
   }

   .pentagon:vor {
      Inhalt: "";
      Position: absolut;
      Höhe: 0;
      Breite: 0;
      oben: -85px;
      links: -18px;
      Rahmenbreite: 0 45px 35px;
      Rahmenstil: durchgezogen;
      Rahmenfarbe: transparent transparent rot;
   }

/*Herzform*/
   .Herz {
      Position: relativ;
      Breite: 100px;
      Höhe: 90px;
   }

   .Herz:vorher,
   .Herz:nach {
      Position: absolut;
      Inhalt: "";
      links: 50px;
      oben: 0;
      Breite: 50px;
      Höhe: 80px;
      Hintergrund: rot;
      -moz-border-radius: 50px 50px 0 0;
      Rahmenradius: 50px 50px 0 0;
      -webkit-transform: drehen(-45 Grad);
      -moz-transform:drehen(-45Grad);
      -ms-transform:drehen(-45Grad);
      -o-transform: drehen(-45 Grad);
      transformieren: drehen (-45 Grad);
      -webkit-transform-origin: 0 100 %;
      -moz-transform-origin: 0 100 %;
      -ms-transform-origin: 0 100 %;
      -o-Transform-Origin: 0 100 %;
      Transform-Ursprung: 0 100 %;
   }

   .Herz:nach {
      links: 0;
      -webkit-transform: drehen(45 Grad);
      -moz-transform:drehen(45 Grad);
      -ms-transform:drehen(45Grad);
      -o-transform: drehen(45 Grad);
      transformieren: drehen (45 Grad);
      -webkit-transform-origin: 100 % 100 %;
      -moz-transform-origin: 100 % 100 %;
      -ms-transform-origin: 100 % 100 %;
      -o-transform-origin: 100 % 100 %;
      Transform-Ursprung: 100 % 100 %;
   }

  /*Diamant*/
   .Diamant {
      Breite: 0;
      Höhe: 0;
      Rand: 50px durchgehend transparent;
      Farbe des unteren Rahmens: rot;
      Position: relativ;
      oben: -50px;
   }

   .diamond:nach {
      Inhalt: '';
      Position: absolut;
      links: -50px;
      oben: 50px;
      Breite: 0;
      Höhe: 0;
      Rand: 50px durchgehend transparent;
      Farbe der oberen Umrandung: rot;
   }

/*Fünfzackiger Stern*/
   .Stern-fünf {
      Rand: 50px 0;
      Position: relativ;
      Anzeige: Block;
      Farbe: rot;
      Breite: 0;
      Höhe: 0;
      Rahmen rechts: 100px durchgehend transparent;
      Rahmen unten: 70px durchgehend rot;
      Rahmen links: 100px durchgehend transparent;
      -moz-transform:drehen(35Grad);
      -webkit-transform: drehen(35 Grad);
      -ms-transform:drehen(35Grad);
      -o-transform: drehen(35 Grad);
   }

   .star-five:vor {
      Rahmen unten: 80px durchgehend rot;
      Rahmen links: 30px durchgehend transparent;
      Rahmen rechts: 30px durchgehend transparent;
      Position: absolut;
      Höhe: 0;
      Breite: 0;
      oben: -45px;
      links: -65px;
      Anzeige: Block;
      Inhalt: '';
      -webkit-transform: drehen(-35 Grad);
      -moz-transform:drehen(-35Grad);
      -ms-transform:drehen(-35Grad);
      -o-transform: drehen(-35 Grad);

   }

   .star-five:nach {
      Position: absolut;
      Anzeige: Block;
      Farbe: rot;
      oben: 3px;
      links: -105px;
      Breite: 0;
      Höhe: 0;
      Rahmen rechts: 100px durchgehend transparent;
      Rahmen unten: 70px durchgehend rot;
      Rahmen links: 100px durchgehend transparent;
      -webkit-transform: drehen(-70 Grad);
      -moz-transform:drehen(-70Grad);
      -ms-transform:drehen(-70Grad);
      -o-transform: drehen(-70 Grad);
      Inhalt: '';
   }

/*Mond*/
   .Mond {
      Breite: 80px;
      Höhe: 80px;
      Rand: 0 30px 20px 0;
      Randradius: 50 %;
      Box-Schatten: 15px 15px 0 0 rot;
   }

 /*Diamantform💎*/
   .Schliff-Diamant {
      Rahmenstil: durchgezogen;
      Rahmenfarbe: transparent transparent rot transparent;
      Rahmenbreite: 0 25px 25px 25px;
      Höhe: 0;
      Breite: 50px;
      Position: relativ;
      Rand: 20px 0 50px 0;
   }

   .cut-diamond:nach {
      Inhalt: "";
      Position: absolut;
      oben: 25px;
      links: -25px;
      Breite: 0;
      Höhe: 0;
      Rahmenstil: durchgezogen;
      Rahmenfarbe: rot transparent transparent transparent;
      Rahmenbreite: 70px 50px 0 50px;
   }

/*Eiform*/
   .Ei {
      Anzeige: Block;
      Breite: 126px;
      Höhe: 180px;
      Hintergrundfarbe: rot;
      -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
      Randradius: 50 % 50 % 50 % 50 % / 60 % 60 % 40 % 40 %;
   }

/*Tai Chi Yin Yang Grafiken*/
   .yin-yang {
      Breite: 96px;
      Höhe: 48px;
      Hintergrund: #eee;
      Rahmenfarbe: #000;
      Rahmenstil: durchgezogen;
      Rahmenbreite: 2px 2px 50px 2px;
      Randradius: 100 %;
      Position: relativ;
   }

   .yin-yang:vor {
      Inhalt: "";
      Position: absolut;
      oben: 50 %;
      links: 0;
      Hintergrund: #eee;
      Rand: 18px durchgezogen #000;
      Randradius: 100 %;
      Breite: 12px;
      Höhe: 12px;
   }

   .yin-yang:nach {
      Inhalt: "";
      Position: absolut;
      oben: 50 %;
      links: 50%;
      Hintergrund: #000;
      Rand: 18px durchgezogen #eee;
      Randradius: 100 %;
      Breite: 12px;
      Höhe: 12px;
   }

/*Chatfenster*/
   .talkbubble {
      Breite: 120px;
      Höhe: 80px;
      Rand links: 20px;
      Hintergrund: rot;
      Position: relativ;
      -moz-Randradius: 10px;
      -Webkit-Randradius: 10px;
      Rahmenradius: 10px;
   }

/*Lupe*/
   .Lupe {
      font-size: 10em; /* Dies steuert die Größe. */
      Anzeige: Inline-Block;
      Breite: 0,4em;
      Höhe: 0,4em;
      Rand: 0,1em durchgehend rot;
      Position: relativ;
      Randradius: 0,35em;
   }

   .Lupe::vor {
      Inhalt: "";
      Anzeige: Inline-Block;
      Position: absolut;
      rechts: -0,25em;
      unten: -0,1em;
      Rahmenbreite: 0;
      Hintergrund: rot;
      Breite: 0,35em;
      Höhe: 0,08em;
      -webkit-transform: drehen(45 Grad);
      -moz-transform:drehen(45 Grad);
      -ms-transform:drehen(45Grad);
      -o-transform: drehen(45 Grad);
   }