Erklärte CSS-Formen: Zeichnen eines Kreises, Dreiecks und mehr mit reinem CSS

Bevor wir anfangen. Wenn Sie mehr kostenlose Inhalte im Videoformat wünschen. Verpassen Sie nicht meinen Youtube-Kanal, auf dem ich wöchentliche Videos zur FrontEnd-Codierung veröffentliche.

//www.youtube.com/user/Weibenfalk

----------

Sind Sie neu in Webentwicklung und CSS? Haben Sie sich jemals gefragt, wie diese schönen Formen hergestellt werden, die Sie überall im Internet sehen? Ich frage mich nicht mehr. Sie sind an der richtigen Stelle.

Im Folgenden werde ich die Grundlagen zum Erstellen von Formen mit CSS erläutern. Zu diesem Thema gibt es viel zu erzählen! Daher werde ich nicht alle (bei weitem nicht alle) Werkzeuge und Formen behandeln, aber dies sollte Ihnen eine grundlegende Vorstellung davon geben, wie Formen mit CSS erstellt werden.

Einige Formen erfordern mehr "Fix und Tricks" als andere. Das Erstellen von Formen mit CSS ist normalerweise eine Kombination aus der Verwendung von Breite, Höhe, oben, rechts, links, Rand, unten, Transformation und Pseudoelementen wie : vor und : nach. Wir haben auch modernere CSS-Eigenschaften, um Formen mit der gleichen Form außerhalb und Clip-Pfad zu erstellen . Ich werde auch unten darüber schreiben.

CSS-Formen - Der grundlegende Weg

Durch die Verwendung wir haben ein paar Tricks in CSS immer in der Lage gewesen , einfache Formen wie Quadrate zu erstellen , Kreise , und Dreiecken mit regelmäßigen CSS - Eigenschaften. Schauen wir uns jetzt einige davon an.

Quadrate und Rechtecke

Quadrate und Rechtecke sind wahrscheinlich die am einfachsten zu erreichenden Formen. Standardmäßig ist ein div immer ein Quadrat oder ein Rechteck.

Sie stellen die Breite und Höhe wie im folgenden Code gezeigt ein. Dann geht es nur noch darum, dem Element eine Hintergrundfarbe zu geben. Sie können beliebige andere Eigenschaften für das Element festlegen.

#square { background: lightblue; width: 100px; height: 100px; }

Kreise

Es ist fast genauso einfach, einen Kreis zu erstellen. Um einen Kreis zu erstellen, können wir den Rahmenradius für das Element festlegen. Dadurch werden gekrümmte Ecken auf dem Element erstellt.

Wenn wir es auf 50% setzen, wird ein Kreis erstellt. Wenn Sie eine andere Breite und Höhe einstellen, erhalten wir stattdessen ein Oval.

#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; }

Dreiecke

Dreiecke sind etwas kniffliger. Wir müssen die Ränder des Elements so einstellen, dass sie mit einem Dreieck übereinstimmen. Wenn Sie die Breite und Höhe des Elements auf Null setzen, entspricht die tatsächliche Breite des Elements der Breite des Rahmens.

Beachten Sie, dass die Randkanten eines Elements 45-Grad-Diagonalen zueinander haben. Aus diesem Grund wird mit dieser Methode ein Dreieck erstellt. Wenn Sie einen der Ränder auf eine Volltonfarbe und den anderen Rand auf transparent setzen, wird die Form eines Dreiecks angenommen.

#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; }

Wenn Sie möchten, dass ein Dreieck / Pfeil in eine andere Richtung zeigt, können Sie die Randwerte entsprechend der Seite ändern, auf der Sie sichtbar sein möchten. Oder Sie können das Element mit der transform- Eigenschaft drehen, wenn Sie wirklich ausgefallen sein möchten.

 #triangle { width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; }

Okay - das ist eine Einführung in Grundformen mit CSS. Es gibt wahrscheinlich unendlich viele Formen, die Sie sich vorstellen können, um sie zu erstellen. Dies sind nur die Grundlagen, aber mit ein wenig Kreativität und Entschlossenheit können Sie mit nur grundlegenden CSS-Eigenschaften viel erreichen.

In einigen Fällen ist es bei fortgeschritteneren Formen auch eine gute Idee, die Pseudoselektoren: after und: before zu verwenden. Dies ist jedoch nicht Gegenstand dieses Artikels, da ich beabsichtige, die Grundlagen zu behandeln, um Sie zum Laufen zu bringen.

Nachteil

Der obige Ansatz hat einen großen Nachteil. Zum Beispiel, wenn Sie möchten, dass Ihr Text herumfließt und Ihre Form umschließt. Ein normales HTML-Div mit Hintergrund und Rahmen zur Bildung der Form lässt dies nicht zu. Der Text passt sich nicht an und fließt nicht um Ihre Form herum. Stattdessen fließt es um das Div selbst (das ein Quadrat oder ein Rechteck ist).

Unten sehen Sie eine Abbildung, die das Dreieck und den Textfluss zeigt.

Glücklicherweise können wir stattdessen einige moderne CSS-Eigenschaften verwenden.

CSS-Formen - In die andere Richtung

Heutzutage haben wir eine Eigenschaft namens Shape-Outside , die in CSS verwendet werden kann. Mit dieser Eigenschaft können Sie eine Form definieren, um die der Text gewickelt wird.

Zusammen mit dieser Eigenschaft haben wir einige Grundformen:

Einsatz()

Kreis()

Ellipse()

Polygon ()

Hier ist ein Tipp : Sie können auch die Eigenschaft clip-path verwenden . Sie können Ihre Form damit auf die gleiche Weise erstellen, aber der Text wird nicht wie bei Shape-Outside um Ihre Form gewickelt.

Das Element, auf das wir die Form mit der Shape-Outside-Eigenschaft anwenden möchten, muss schwebend sein. Es muss auch eine definierte Breite und Höhe haben. Das ist wirklich wichtig zu wissen!

Lesen Sie hier mehr darüber, warum. Unten ist auch ein Text, den ich aus dem bereitgestellten Link zu developer.mozilla.org entnommen habe.

Die shape-outsideEigenschaft wird anhand der Werte aus der folgenden Liste angegeben, die den Float-Bereich für Float-Elemente definieren. Der Float-Bereich bestimmt die Form, um die Inline-Inhalte (Float-Elemente) gewickelt werden.

Einsatz()

Mit dem Typ inset () kann ein Rechteck / Quadrat mit einem optionalen Versatz für den Umbruchtext erstellt werden. Hier können Sie Werte angeben, um wie viel Ihr Umhüllungstext die Form überlappen soll.

Sie können festlegen, dass der Versatz für alle vier Richtungen gleich ist: Einschub (20 Pixel). Oder es kann für jede Richtung individuell eingestellt werden: Einschub (20px 5px 30px 10px) .

Sie können auch andere Einheiten verwenden, um den Versatz festzulegen, z. B. Prozent. Die Werte entsprechen wie folgt : Einschub (oben rechts unten links) .

Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the right, 30px at the bottom and 10px to the left. If you want your text to go around your square instead you can just skip using inset() at all. Instead set the background on your div and specify the size as usual.

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; }

It is also possible to give inset() a second value that specifies the border-radius of the inset. Like below:

 #square { float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; }

circle()

In this one a circle is created using the shape-outside property. You also have to apply a clip-path with the corresponding property for the circle to show up.

The clip-path property can take the same value as the shape-outside property so we can give it the standard circle() shape that we used for shape-outside. Also, note that I've applied a 20px margin on the element here to give the text some space.

#circle { float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; }

In the above example, I don't specify the radius of the circle. This is because I want it to be as big as the div is (300px). If you want to specify a different size for the circle you can do that.

The circle() takes two values. The first value is the radius and the second value is the position. These values will specify the center of the circle.

In the below example I've set the radius to 50%. Then I have shifted the center of the circle by 30%. Note that the word "at" has to be used between the radius and position values.

I've also specified another position value on the clip-path. This will clip the circle in half as I move the position to zero.

 #circle { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; }

ellipse()

Ellipses work the same way as circles except that they create an oval. You can define both the X value and the Y value, like this: ellipse(25px  50px).

The same as a circle, it also takes a position value as the last value.

 #ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; }

polygon()

A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the first letter in my name. I start from the coordinates 0,0 and move from left to right to create the "T" shape.

#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; }

Images

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a .png image with a transparent background.

#moon { float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); }

And that's it! Thank you for reading.

About the author of this article

My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:

Twitter — @weibenfalk,

Weibenfalk on Youtube,

Weibenfalk Courses Website.