Hogyan rajzoljunk pipát/pipát CSS használatával

” konténer elem egy „ id ' vagy egy ' osztály ”:

< div id = 'pipa' >< / div >

A fenti HTML utasításban egy ' div ' elem hozzáadva a következő azonosítóval: ' pipa ”.

Miközben az elemet a CSS-tulajdonságokkal formálja, adjon hozzá egy „ id ” választó segítségével a HTML elemre hivatkozhat, majd adjon meg benne tulajdonságokat:

---

---

#pipa
{
transzformáció: forgatás ( 45 fok ) ;
magasság : 45 képpont;
szélesség : 20 képpont;
margó-bal: ötven %;
szegély-alsó: 9 képpont tömör sötétzöld;
szegély-jobb: 9 képpont tömör sötétzöld;
}

A fenti CSS stíluselem a következő tulajdonságokkal rendelkezik:

• A ' átalakítás: forgatás (45 fok) ” elforgatja az egyenes függőleges és vízszintes vonalakat oly módon, hogy pipa szimbólumot formázzon.
• A ' magasság ” tulajdonság a pipa szimbólum magasságát a „ 45 képpont ”.
• A ' szélesség ' tulajdonság teszi a szimbólumot ' 20 képpont ” széles.
• A ' margó-bal ” tulajdonság a pipa szimbólumot a weboldal felületének közepéhez igazítja.
• Ezt követően a „ határ-alsó ” és „ határ-jobbra ” tulajdonságok mindkét sor szegélysúlyát „” értékre állítják 9 képpont ', és határozza meg a ' sötétzöld ” szín mindkét sorhoz, amelyek teljes pipa szimbólumot alkotnak.

Ezzel egy zöld színű egyszerű pipa vagy pipa szimbólum jelenik meg a weboldal felületének közepén. 45 képpont 'magas és' 20 képpont ” széles:

2. módszer: Pipa/pipa beszúrása Unicode karakterekkel

Vannak olyan Unicode-karakterek is, amelyek automatikusan beillesztik a pipa jeleket a kimenetbe anélkül, hogy stílust és paraméterértékeket kellene meghatározniuk. Például a Unicode karakter ' U+2713 ” segít egy egyszerű pipa szimbólum hozzáadását a kimenethez. Hasonlóképpen a Unicode karakter ' U+2713 ” segít beszúrni a fehér nehéz pipa szimbólumot a kimenetbe. Ha meg szeretné tudni, hogyan adhatja hozzá ezeket a Unicode-karaktereket egy HTML-dokumentumhoz egy teljes útmutatón keresztül, kattintson a gombra itt .

Következtetés

Pipa vagy pipa szimbólum rajzolható úgy, hogy először hozzon létre egy HTML-elemet egy azonosítóval vagy egy osztállyal, majd adja hozzá az azonosítót vagy az osztályválasztót a CSS-stíluselemhez, hogy erre az elemre hivatkozzon. A weblap felületén lévő pipa/pipa alakjának létrehozásához különböző CSS-tulajdonságokat, mint pl. magasság ”, „ szélesség ”, „ forog ” és „ szín ” a kívánt pipa típusának és méretének megfelelően használható. Ez a blog bemutatja a pipa/pipa CSS használatával történő rajzolásának módszerét.