Kuinka piirtää valintamerkki/rasti CSS:n avulla

' säiliöelementti ' id ' tai ' luokkaa ':

< div id = 'valintamerkki' >< / div >

Yllä olevassa HTML-lauseessa ' div ' elementti on lisätty tunnuksella ' valintamerkki ”.

Kun muokkaat elementtiä CSS-ominaisuuksien avulla, lisää ' id ” -valitsimella viitataan HTML-elementtiin ja määritetään sitten sen sisällä olevat ominaisuudet:

---

---

#valintamerkki
{
muunnos: kierrä ( 45 astetta ) ;
korkeus : 45px;
leveys : 20px;
marginaali vasen: viisikymmentä %;
reuna-ala: 9px kiinteä tummanvihreä;
reuna-oikea: 9px kiinteä tummanvihreä;
}

Yllä olevalla CSS-tyylielementillä on seuraavat ominaisuudet:

• ' muunnos: käännä (45 astetta) ” pyörittää suoria pysty- ja vaakaviivoja siten, että muodostuu rastisymbolin muoto.
• ' korkeus '-ominaisuus asettaa rastisymbolin korkeudeksi ' 45 kuvapistettä ”.
• ' leveys 'ominaisuus tekee symbolin' 20px ”leveä.
• ' marginaali vasen ”-ominaisuus kohdistaa rastisymbolin verkkosivun käyttöliittymän keskelle.
• Sen jälkeen ' raja-ala ' ja ' raja-oikea '-ominaisuudet asettavat molempien rivien reunapainoksi ' 9px ' ja määritä ' tummanvihreä ” väri molemmille riveille, jotka muodostavat täydellisen rastisymbolin.

Tämä luo vihreän yksinkertaisen valintamerkin tai rastisymbolin, joka näkyy verkkosivun käyttöliittymän keskellä ' 45 kuvapistettä 'korkea ja' 20px ”leveä:

Tapa 2: Valintamerkin/rastikkeen lisääminen Unicode-merkeillä

On myös joitakin Unicode-merkkejä, jotka automaattisesti lisäävät rastimerkkisymbolit ulostuloon ilman, että niille tarvitsee muotoilla ja määrittää parametriarvoja. Esimerkiksi Unicode-merkki ' U+2713 ” auttaa lisäämään yksinkertaisen rastisymbolin tulosteeseen. Samoin Unicode-merkki ' U+2713 ” auttaa lisäämään valkoisen raskaan rastisymbolin tulosteeseen. Saat lisätietoja näiden Unicode-merkkien lisäämisestä HTML-dokumenttiin täydellisen oppaan avulla napsauttamalla tässä .

Johtopäätös

Valintamerkki tai rastisymboli voidaan piirtää luomalla ensin HTML-elementti tunnuksella tai luokalla ja lisäämällä sitten id tai luokan valitsin CSS-tyylielementtiin viittaamaan kyseiseen elementtiin. Voit luoda valintamerkin/rastin muodon verkkosivun käyttöliittymään käyttämällä erilaisia ​​CSS-ominaisuuksia, kuten ' korkeus ”, “ leveys ”, “ kiertää ' ja ' väri ” voidaan käyttää halutun valintamerkin tyypin ja koon mukaan. Tämä blogi esittelee tapaa piirtää valintamerkki/rasti CSS:n avulla.