Mit CSS kann man nicht nur die Farben und Schriftarten auf einer Webseite ändern, sondern auch benutzerdefinierte Formen erstellen. Hier sind ein paar Beispiele dafür:
1. Rechteck:
```
#rectangle {
width: 200px;
height: 100px;
background: red;
}
```
Einfach ein div erstellen mit der ID “rectangle” und dieses CSS wird ihm die Form eines Rechtecks geben.
2. Kreis:
```
#circle {
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
}
```
Das macht genau das gleiche wie das Rechteck, aber mit dem border-radius wird es zu einem Kreis.
3. Oval:
```
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 50%;
}
```
Im Grunde ist es das gleiche wie der Kreis, aber durch die Änderung der Höhe wird es zu einem Oval.
4. Dreieck:
```
#triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid red;
}
```
Dieses Beispiel ist etwas komplizierter. Es verwendet die Eigenschaften “border-left” und “border-right”, um die Breite des Dreiecks zu erzeugen und “border-bottom”, um die Höhe des Dreiecks zu erzeugen. Die Farbe des Dreiecks wird durch “border-bottom” bestimmt.
Anmerkung: Diese Techniken funktionieren in den meisten modernen Browsern, aber möglicherweise nicht in älteren Versionen. Es ist immer eine gute Idee, Ihre Arbeit in mehreren Browsern zu testen.
