Sådan tegner du et flueben/flueben ved hjælp af CSS

' beholderelement med et ' id ' eller en ' klasse ”:

< div id = 'afkrydsning' >< / div >

I ovenstående HTML-sætning er en ' div ' element er blevet tilføjet med id erklæret som ' afkrydsning ”.

Mens du styler elementet ved hjælp af CSS-egenskaberne, skal du tilføje en ' id ”-vælgeren for at henvise til HTML-elementet og derefter angive egenskaber inde i det:

---

---

#afkrydsning
{
transformere: rotere ( 45 grader ) ;
højde : 45px;
bredde : 20px;
margin-venstre: halvtreds %;
border-bottom: 9px fast mørkeolivegrøn;
kant-højre: 9px fast mørkolivegrøn;
}

Ovenstående CSS-stilelement har følgende egenskaber:

• Det ' transformation: roter (45 grader) ” roterer de lige lodrette og vandrette linjer på en sådan måde, at det danner formen af ​​et flueben.
• Det ' højde egenskaben indstiller højden af ​​fluebenssymbolet til ' 45 px ”.
• Det ' bredde ' egenskab gør symbolet ' 20 px ” bred.
• Det ' margin-venstre ” egenskab justerer fluebenssymbolet til midten af ​​websidens grænseflade.
• Derefter vil ' grænse-bund ' og ' grænse-højre ' egenskaber indstiller grænsevægten af ​​begge linjer til ' 9px ' og definere ' mørkeolivegrøn ” farve for begge linjer, der laver et komplet fluebenssymbol.

Dette vil skabe et grønt enkelt flueben eller fluebenssymbol, der vises i midten af ​​websidens grænseflade ' 45 px 'høj og' 20 px ” bred:

Metode 2: Indsættelse af et flueben/flueben ved hjælp af Unicode-tegn

Der er også nogle Unicode-tegn, der automatisk indsætter fluebenssymbolerne i outputtet uden at skulle style og definere parameterværdier for dem. For eksempel Unicode-tegnet ' U+2713 ” hjælper med at tilføje et simpelt fluebenssymbol i outputtet. På samme måde er Unicode-tegnet ' U+2713 ” hjælper med at indsætte det hvide tunge flueben i outputtet. For at lære, hvordan du tilføjer disse Unicode-tegn i et HTML-dokument gennem en komplet vejledning, skal du klikke her .

Konklusion

Et flueben eller et flueben kan tegnes ved først at oprette et HTML-element med et id eller en klasse og derefter tilføje id'et eller klassevælgeren i CSS-stilelementet for at henvise til det element. For at skabe formen af ​​et flueben/flueben på websidens grænseflade, forskellige CSS-egenskaber som ' højde ', ' bredde ', ' rotere ' og ' farve ” kan bruges efter typen og størrelsen af ​​det flueben, man ønsker. Denne blog demonstrerer metoden til at tegne et flueben/flueben ved hjælp af CSS.