Forklarede CSS-former: Sådan tegner du en cirkel, trekant og mere ved hjælp af ren CSS

Før vi starter. Hvis du vil have mere gratis indhold, men i videoformat. Gå ikke glip af min Youtube-kanal, hvor jeg ugentligt offentliggør videoer på FrontEnd-kodning.

//www.youtube.com/user/Weibenfalk

----------

Er du ny inden for webudvikling og CSS? Har du nogensinde spekuleret på, hvordan disse flotte figurer er lavet, som du ser over hele internettet? Undrer dig ikke mere. Du er kommet til det rigtige sted.

Nedenfor vil jeg forklare det grundlæggende ved at skabe figurer med CSS. Der er meget at fortælle dig om dette emne! Derfor vil jeg ikke dække alle (langt fra alle) værktøjer og former, men dette skal give dig en grundlæggende idé om, hvordan former oprettes med CSS.

Nogle former kræver mere "fix og tricks" end andre. Oprettelse af figurer med CSS er normalt en kombination af brug af bredde, højde, top, højre, venstre, kant, bund, transformation og pseudo-elementer som : før og efter. Vi har også mere moderne CSS-egenskaber til at skabe former med lignende form-ude og klip-sti. Jeg skriver også om dem nedenfor.

CSS-former - Den grundlæggende måde

Ved at bruge et par tricks i CSS har vi altid været i stand til at skabe grundlæggende figurer som firkanter , cirkler , og trekanter med regelmæssige CSS egenskaber. Lad os se på et par af dem nu.

Kvadrater og rektangler

Kvadrater og rektangler er sandsynligvis de nemmeste former at opnå. Som standard er en div altid en firkant eller et rektangel.

Du indstiller bredde og højde som vist i nedenstående kode. Så er det bare et spørgsmål om at give elementet en baggrundsfarve. Du kan have de andre egenskaber, du vil have på elementet.

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

Cirkler

Det er næsten lige så let at oprette en cirkel. For at oprette en cirkel kan vi indstille grænseradien på elementet. Dette vil skabe buede hjørner på elementet.

Hvis vi sætter det til 50%, opretter det en cirkel. Hvis du indstiller en anden bredde og højde, får vi i stedet en oval.

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

Trekanter

Trekanter er lidt vanskeligere. Vi er nødt til at indstille grænserne for elementet, så det passer til en trekant. Ved at indstille bredden og højden til nul på elementet, vil elementets faktiske bredde være bredden af ​​grænsen.

Husk, at kantens kanter på et element er 45 graders diagonaler i forhold til hinanden. Derfor fungerer denne metode til at skabe en trekant. Ved at indstille en af ​​kantene til en solid farve og den anden kant til gennemsigtig får den form af en trekant.

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

Hvis du vil have en trekant / pil, der peger i en anden retning, kan du ændre kantværdierne svarende til hvilken side du vil have synlig. Eller du kan rotere elementet med transform- egenskaben, hvis du vil være rigtig fancy.

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

Okay - det er en introduktion til grundlæggende figurer med CSS. Der er sandsynligvis en uendelig mængde former, du kan tænke dig at skabe. Dette er kun det grundlæggende, men med lidt kreativitet og beslutsomhed kan du opnå meget med bare grundlæggende CSS-egenskaber.

I nogle tilfælde, med mere avancerede former, er det også en god ide at bruge: efter og: før pseudovælgere. Dette er uden for denne artikels anvendelsesområde, da min hensigt er at dække det grundlæggende for at komme i gang.

Ulempe

Der er en stor ulempe med ovenstående tilgang. For eksempel, hvis du vil have din tekst til at flyde rundt og pakke din form. En almindelig HTML-div med baggrund og kanter for at udgøre formen tillader det ikke. Teksten tilpasser sig ikke og flyder ikke rundt om din form. I stedet flyder det omkring selve diven (som er en firkant eller et rektangel).

Nedenfor er en illustration, der viser trekanten og hvordan teksten flyder.

Heldigvis har vi nogle moderne CSS-egenskaber at bruge i stedet.

CSS-figurer - Den anden vej

I dag har vi en egenskab kaldet form-udvendig til brug i CSS. Denne egenskab giver dig mulighed for at definere en form, som teksten vikles / flyder rundt.

Sammen med denne egenskab har vi nogle grundlæggende former:

indsats ()

cirkel()

ellips ()

polygon ()

Her er et tip : Du kan også bruge klipsti- egenskaben. Du kan oprette din form med det på samme måde, men det lader ikke teksten vikle rundt om din form, som figur-udvendigt gør.

Det element, som vi skal anvende formen på, med formen uden for ejendommen, skal flydes. Det skal også have en defineret bredde og højde. Det er virkelig vigtigt at vide!

Du kan læse mere om hvorfor her. Nedenfor er også en tekst, som jeg har taget fra det medfølgende link til developer.mozilla.org.

Den shape-outsideegenskab er angivet ved hjælp af værdierne fra listen nedenfor, der definerer svømmeren område for float elementer. Flydearealet bestemmer den form, omkring hvilket indbygget indhold (flydelementer) vikles.

indsats ()

Indsættet () kan bruges til at oprette et rektangel / firkant med en valgfri forskydning til indpakningsteksten. Det giver dig mulighed for at angive værdier for, hvor meget du ønsker, at din indpakningstekst skal overlappe formen.

Du kan angive, at forskydningen skal være den samme for alle fire retninger som denne: indsats (20 pixel). Eller det kan indstilles individuelt for hver retning: indsats (20px 5px 30px 10px) .

Du kan også bruge andre enheder til at indstille forskydningen, for eksempel procent. Værdierne svarer således: indsats (øverst til højre nederst til venstre) .

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

Du kan også bruge billeder med gennemsigtig baggrund til at skabe din form. Ligesom denne runde smukke måne nedenfor.

Dette er et .png-billede med en gennemsigtig baggrund.

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

Og det er det! Tak fordi du læste.

Om forfatteren af ​​denne artikel

Mit navn er Thomas Weibenfalk og jeg er en udvikler fra Sverige. Jeg opretter regelmæssigt gratis tutorials på min Youtube-kanal. Der er også et par premium kurser derude på React og Gatsby. Besøg mig gerne på disse links:

Twitter - @weibenfalk,

Weibenfalk på Youtube,

Weibenfalk kursuswebsted.