CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke

.Dreieck{
        Rahmen oben: 20px durchgehend rot;
        Breite: 50px;
        Höhe: 50px;
        Rahmen rechts: 20px, durchgehend blau; 
        Rahmen unten: 20px, durchgehend grau; 
        Rahmen links: 20px, durchgehend grün;
   }

.Dreieck{
        Rahmen oben: 20px durchgehend rot;
        Breite: 0px;
        Höhe: 0px;
        Rahmen rechts: 20px, durchgehend blau; 
        Rahmen unten: 20px, durchgehend grau; 
        Rahmen links: 20px, durchgehend grün;
   } 

.Dreieck{
    Rahmen oben: 20px durchgehend transparent;
    Breite: 0px;
    Höhe: 0px;
    Rahmen rechts: 20px durchgehend transparent; 
    Rahmen unten: 20px, durchgehend grau; 
    Rahmen links: 20px durchgehend transparent;
   } 

.Container{
        Position: relativ;
        Rand oben: 50px;
        Polsterung: 6px 12px;
        Farbe: #fff;
        Schriftgröße: 16px;
        Zeilenhöhe: 25px;
        Breite: 200px;
        Höhe: 50px;
        Hintergrundfarbe: orange;
        Rahmenradius: 4px;    
   }
   p.container:nach{
        Position: absolut;
        oben: -40px;
        rechts: 20px;
        Rahmen oben: 20px durchgehend transparent;
        content:" "; // Den Inhalt nicht weglassen, sonst wird er nicht angezeigt width:0px;
        Höhe: 0px;
        Rahmen rechts: 20px durchgehend transparent; 
        Rahmen unten: 20px, durchgehend orange; 
        Rahmen links: 20px durchgehend transparent;
   }


<p Klasse="Behälter">
    Hallo, dieser Artikel zeigt Ihnen, wie Sie mit CSS einen Blasenrahmen erstellen.
</p>