Grundlagen des CSS-Zeichnens spezieller Grafiken

1. Gleichschenkliges Dreieck

<span style="color: #800000;">.isosceles</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}

2. Rechtwinkliges Dreieck

<span style="color: #800000;">.right</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}

3. Kreis

<span style="color: #800000;">.round</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}

4. Ellipse

<span style="color: #800000;">.ellipse</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}