Kaip nupiešti varnelę / varnelę naudojant CSS

' konteinerio elementas su ' id “ arba „ klasė “:

< div id = 'varnelė' >< / div >

Aukščiau pateiktame HTML teiginyje „ div “ elementas buvo pridėtas su ID deklaruotu kaip „ varnelė “.

Kurdami elemento stilių naudodami CSS ypatybes, pridėkite „ id “ parinkiklį, norėdami nurodyti HTML elementą, tada nurodykite jame esančias ypatybes:

---

---

#varnelė
{
transformuoti: pasukti ( 45 laipsniai ) ;
aukščio : 45 pikseliai;
plotis : 20 pikselių;
paraštė kairėje: penkiasdešimt %;
kraštinė apačia: 9 pikseliai, vientisa tamsiai žalia;
kraštinė dešinė: 9 pikseliai vientisa tamsiai žalia;
}

Aukščiau pateiktas CSS stiliaus elementas turi šias savybes:

• „ transformuoti: pasukti (45 laipsnių) “ pasuka tiesias vertikalias ir horizontalias linijas taip, kad būtų varnelės simbolio forma.
• „ aukščio ypatybė nustato varnelės simbolio aukštį į „ 45 piks “.
• „ plotis 'ypatybė daro simbolį ' 20 piks “ platus.
• „ paraštė-kairė ” ypatybė sulygiuoja varnelės simbolį su tinklalapio sąsajos centru.
• Po to „ kraštinė-apačia “ ir „ siena-dešinė “ savybės nustato abiejų eilučių kraštinės svorį į “ 9 pikseliai “ ir apibrėžkite „ tamsiai žalia “ spalva abiejose eilutėse, kurios sudaro pilną varnelės simbolį.

Tai sukurs žalios spalvos paprastą varnelę arba varnelės simbolį, rodomą tinklalapio sąsajos centre. 45 piks 'aukštas ir' 20 piks “ platus:

2 būdas: varnelės / varnelės įterpimas naudojant unikodo simbolius

Taip pat yra keletas Unikodo simbolių, kurie automatiškai įterpia varnelės simbolius į išvestį, nereikalaujant stiliaus ir apibrėžti jų parametrų reikšmes. Pavyzdžiui, Unicode simbolis ' U+2713 “ padeda išvestyje pridėti paprastą varnelės simbolį. Panašiai Unicode simbolis ' U+2713 “ padeda įterpti baltą sunkų varnelės simbolį išvestyje. Norėdami sužinoti, kaip įtraukti šiuos Unikodo simbolius į HTML dokumentą per visą vadovą, spustelėkite čia .

Išvada

Varnelę arba varnelės simbolį galima nupiešti pirmiausia sukuriant HTML elementą su ID arba klase, o po to CSS stiliaus elemente pridedant id arba klasės parinkiklį, kad būtų nurodytas tas elementas. Norėdami sukurti varnelės / varnelės formą tinklalapio sąsajoje, įvairios CSS ypatybės, pvz. aukščio “, „ plotis “, „ pasukti “ ir „ spalva “ galima naudoti pagal norimos varnelės tipą ir dydį. Šiame tinklaraštyje parodytas varnelės / varnelės piešimo metodas naudojant CSS.