CSS3 realisiert verschiedene grafische Effekte kleiner Pfeile

#Dreieck-nach-oben{
	Anzeige: Inline-Block;
	Breite: 0;
	Höhe: 0;
	Rahmen links: 30px durchgehend transparent;
	Rahmen rechts: 30px durchgehend transparent;
	Rahmen unten: 50px durchgehend rot;}
#Dreieck-nach-unten {
	Anzeige: Inline-Block;
	Breite: 0;
	Höhe: 0;
	Rahmen links: 30px durchgehend transparent;
	Rahmen rechts: 30px durchgehend transparent;
	Rahmen oben: 50px durchgehend rot;}
#Dreieck-links {
	Anzeige: Inline-Block;
	Breite: 0;
	Höhe: 0;
	Rahmen oben: 30px durchgehend transparent;
	Rahmen rechts: 50px durchgehend rot;
	Rahmen unten: 30px durchgehend transparent;}
#Dreieck-rechts
	Anzeige: Inline-Block;
	Breite: 0;
	Höhe: 0;
	Rahmen oben: 30px durchgehend transparent;
	Rahmen links: 50px durchgehend rot;
	Rahmen unten: 30px durchgehend transparent;} 

#Dreieck-obenlinks {
    Anzeige: Inline-Block;
    Breite: 0;
    Höhe: 0;
    Rahmen oben: 50px durchgehend rot;
    Rahmen rechts: 50px durchgehend transparent;
}
#Dreieck-oben rechts {
    Anzeige: Inline-Block;
    Breite: 0;
    Höhe: 0;
    Rahmen oben: 50px durchgehend rot;
    Rahmen links: 50px durchgehend transparent;
}
#Dreieck-untenlinks {
    Anzeige: Inline-Block;
    Breite: 0;
    Höhe: 0;
    Rahmen unten: 50px durchgehend rot;
    Rahmen rechts: 50px durchgehend transparent;
}
#Dreieck-untenrechts {
    Anzeige: Inline-Block;
    Breite: 0;
    Höhe: 0;
    Rahmen unten: 50px durchgehend rot;
    Rahmen links: 50px durchgehend transparent;
}

#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 %;
}