Melukis Bendera Togo dengan CSS

Menyemak halaman Wikipedia untuk Bendera Togo, ia menerangkannya sebagai:

• Lima jalur mendatar berselang seli antara hijau dan kuning
• Medan merah segi empat sama di penjuru kiri sebelah atas
• Bintang putih berbucu lima di medan merah
• Ia mempunyai perkadaran 3:5 (5 unit lebar untuk setiap 3 unit ketinggian)

Untuk warna pula, kami akan menggunakan:

• #006a4e untuk hijau
• #ffce00 untuk kuning
• #d21034 untuk merah
• #fff untuk yang putih

HTML

Kami akan mengodkan bendera ini menggunakan satu elemen HTML:

<div role="img" aria-label="Flag of Togo">



<p>For accessibility reasons, we added a couple of attributes:<br>
role="img" to indicate the element represents an image.<br>
aria-label="Flag of Togo" so assistive technologies can announce the image as Togo's flag.</p>

<p>Maybe it would be better to have a second visually-hidden element with the flag's "alternative text" linked with an aria-labelledby, but we'll keep it as a single element for simplicity.</p>
<h2>
  
  
  CSS
</h2>

<p>Let's start by setting the flag properties that will be needed:<br>
</p>

<pre class="brush:php;toolbar:false">.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
}

Dengan nisbah aspek kami menetapkan perkadaran bendera (lebar didahulukan dalam kes ini). Dan kami menetapkan kedudukan relatif kerana kami akan melukis bintang menggunakan unsur pseudo kedudukan mutlak dan kami mahu menyimpannya dalam bekas bendera.

Untuk latar belakang, kami memerlukan lima jalur mendatar: hijau, kuning, hijau, kuning dan hijau. Ini ialah corak berulang hijau dan kuning yang boleh dikodkan dengan mudah menggunakan kecerunan linear berulang:

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

Sekarang kita mempunyai palang, kita memerlukan petak merah di bahagian atas sebelah kiri. Kita boleh menggunakan unsur pseudo, tetapi sebaliknya, kita akan menambah kecerunan lain pada latar belakang:

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

Kecerunan baharu ini akan berwarna merah sepenuhnya (#d21034 0 0), diletakkan di bahagian atas sebelah kiri bendera (0 0), dengan lebar 36% dan ketinggian 60% bendera (36% 60% ) jadi ia mengekalkan perkadaran 3:5 yang akan menjadikannya segi empat sama (36 = 60 * 3/5). Dan kita perlu memastikan bahawa ia tidak berulang (tidak berulang), jika tidak, ia akan menduduki seluruh bekas dan semuanya akan menjadi merah.

Dengan ini, kami mempunyai pangkalan untuk bendera, dan kami perlu melukis bintang itu. Kita boleh melakukannya dengan kecerunan kon, tetapi itu akan menjadi sakit kecil di leher. Sebaliknya, kami akan menggunakan unsur pseudo dan kemudian memangkasnya ke dalam bentuk bintang menggunakan laluan klip:

.flag.togo::before {
  content: "";
  width: 20%;
  aspect-ratio: 1;
  position: absolute;
  /* half of the size of the red square */
  left: 18%;
  top: 30%;
  /* translated half its size to top and left to center it */
  transform: translate(-50%, -50%);
  background: #fff;
  clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                     50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
}

Nota: Ini adalah mata anggaran untuk bintang. Kita boleh menggunakan trigonometri untuk menjadikannya sempurna. Tetapi ini akan berfungsi sebagai anggaran yang cukup baik.
Dengan itu, kita sudah selesai! Keseluruhan kod CSS untuk bendera Togo ialah:

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);

  &::before {
    content: "";
    width: 20%;
    aspect-ratio: 1;
    position: absolute;
    left: 18%;
    top: 30%;
    background: #fff;
    clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                       50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
  }
}

Beberapa Fikiran

Jika kami menambah paparan: blok sebaris pada gaya bendera, kami akan dapat menjadikannya sejajar dengan teks. Dalam kes itu, kita perlu menetapkan ketinggian atau lebar supaya sifat nisbah aspek boleh melakukan keajaibannya dan menetapkan nilai lain secara automatik.

Dengan melukis bendera ini, kami telah berlatih:

• Kedudukan: relatif dan mutlak
• Kecerunan: linear dan berulang linear
• Nisbah bidang: untuk menetapkan bendera dan saiz bintang
• Laluan klip: untuk membentuk bintang
• Unsur Pseudo: untuk mencipta bintang itu sendiri

Saya harap anda menikmati tutorial ringkas ini. Saya merancang untuk mengeluarkan yang baharu tidak lama lagi dengan bendera lain, menerangkan cara kecerunan yang berbeza berfungsi –bukan sahaja yang linear. Nantikannya!

Atas ialah kandungan terperinci Melukis Bendera Togo dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!