Organische Border und Flächen mit CSS

Mit CSS lassen sich auch ganz einfach organisch wirkende Formen erzeugen. Genutzt wird für diese kleine Spielerei die CSS Property border-radius. In unserem Beispiel unten werden für die Ecken eines DIV-Containers unterschiedliche Radien definiert und das Resultat sieht wie folgt aus:

Der CSS-Code zu unserem Beispiel:

background: #f09;
background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
width:380px;
height: 340px;

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.