npostnik.de

Rounded Corners in CSS (with a little help from php)

Es gibt einige Beispiele im Web, wie man abgerundete Ecken mit CSS machen kann. z.B. hier:
CSS Play
Dabei wird nach der Methode der Näherung immer pro Zeile eine Linie gezeichnet. Die Methode hat den Vorteil, dass man keine Bilder zeichnen muss und einfach die Farben ändern kann. Der Nachteil sind die unzähligen Divs, die einen schwachen Browser vielleicht auch mal zur Verzweiflung bringen können. Aber die Entscheidung, wie mans macht überlasse ich jedem selbst. Ich habe nur PHP dazu verwendet, um mir diese Divs und das CSS dazu zu generieren. Dabei kommt der gute alte Satz des Pythagoras zum Einsatz.
Hier mal eine kurze Erklärung, was das Skript macht. Zunächst ist da ein umgebendes div, das relativ positioniert wird, darin ist ein Div mit Inhalt – das kann auch ein Bild, ein Text, eine Tabelle etc. sein. Und am Ende 4 weitere Divs, die als Ecken gerendert werden. Jedes dieser vier Eck-Divs enthält viele weitere Divs, und zwar pro Rundungszeile einen. In der Variablen r definiert man den Radius der Ecken.
zum Testen
Download (ist eine Html-Datei, einfach speichern und Endung ändern)

Die mobile Version verlassen