Melukis Bendera Taiwan dengan CSS

Saya sangat kagum dengan hasil kerja @alvaromontoro

Melukis Bendera Togo dengan CSS

Alvaro Montoro ・ 19 Nov

#css #html #webdev

melukis bendera Togo dengan div tunggal dan sekumpulan CSS ajaib. Ia benar-benar memeranjatkan saya. Oleh itu, saya mahu melakukan perkara yang sama. Inilah cara saya melakukannya.

HTML

Saya menambah satu

dengan beberapa sifat aria. Ini akan menjadi single

untuk memaparkan bendera.

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

CSS

Saya menggunakan kaedah yang sama seperti @alvaromontoro untuk mencipta latar belakang asas bendera Taiwan: warna latar belakang merah dengan segi empat tepat biru di sebelah kiri atas.

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

Matahari

Ok, bahagian yang paling mudah sudah selesai. Kini tiba masanya untuk urusan sebenar. Matahari di atas bendera.

Ia kelihatan agak rumit, dengan 12 rasuk dan bulatan di tengah. Bagaimanakah mungkin untuk menggunakan unsur pseudo, ::sebelum dan ::selepas untuk melukisnya? Rasanya hanya clip-path: path() adalah satu-satunya cara untuk melakukannya kerana path() boleh melukis sebarang bentuk yang kita mahu. Walau bagaimanapun, clip-path: path() mempunyai kelemahan yang membawa maut: ia tidak responsif! Ini bermakna bendera hanya boleh mempunyai satu saiz jika saya memilih pendekatan itu.

Saya mula googling banyak fail SVG bendera Taiwan. Dan saya perasan bahawa mereka hanya menggunakan 2 unsur untuk mewakili matahari.

1. bintang 12 rasuk putih
2. bulatan putih dengan sempadan biru

Apabila bulatan diletakkan di tengah bintang. Nampaknya terdapat 12 rasuk mengelilingi bulatan dengan jurang yang dikehendaki. Sangat bijak!. Nampaknya pereka telah mengetahui cara bijak ini untuk melukis matahari itu. Dengan mengambil pendekatan ini, saya boleh menggunakan ::before sebagai bulatan dan ::after sebagai bintang.

bintang 12 pancaran

Adalah sangat mudah untuk mencari fail SVG bendera Taiwan. Malangnya, semua bintang dilukis dengan laluan(). Ini kerana path() adalah responsif apabila ia berada dalam

Ia adalah masalah yang sangat sukar. Penyelesaian terakhir saya adalah benar-benar mengira semua kedudukan semua titik bintang 12 pancaran? Saya menggunakan Editor Laluan SVG dalam talian yang hebat inihttps://yqnn.github.io/svg-path-editor/ untuk menggambarkan semua titik dalam laluan.

Dan saya bertanya kepada abang saya yang sangat mahir dalam matematik apakah kedudukan mata yang lain. Dia menggunakan mathematica untuk menyelesaikan 12 persamaan linear dan mendapat semua mata! ?

Kemudian, saya berundur ke editor laluan untuk melukis garis besar bintang sebagai laluan dan menskalakannya supaya ia berada dalam skop 100*100.

Saya kemudian menukar semua kedudukan kepada peratusan kerana ia sudah berada dalam skop 100*100. Hasilnya, kita boleh memaparkan bintang pada bendera

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

Bulatan

Bulatan lebih mudah. Walau bagaimanapun, percubaan pertama saya menggunakan sempadan. Ia gagal kerana lebar sempadan hanya boleh px. Saya menukar menggunakan radial-gradient. Bahagian yang sukar ialah peratusan dalam kecerunan jejari perlu menjadi pepenjuru unsur supaya ia juga memerlukan beberapa matematik tetapi ia tidak begitu sukar.

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

Hasilnya

CSS penuh ialah

&::after {
    content: '';
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 25%;
    height: calc(3 / 8 * 100%);
    background: white;
    clip-path: polygon(50% 0%,56.6987% 25%,75% 6.6987%,68.3013% 31.6987%,93.3013% 25%,75% 43.3013%,100% 50%,75% 56.6987%,93.3013% 75%,68.3013% 68.3013%,75% 93.3013%,56.6987% 75%,50% 100%,43.3013% 75%,25% 93.3013%,31.6987% 68.3013%,6.6983% 75%,25% 56.6987%,0% 50%,25% 43.3013%,6.6983% 25%,31.6987% 31.6987%,25% 6.6983%,43.3013% 25%);;
  }

Anda juga boleh menyemak kerja saya di codepen di bawah

Semoga anda menyukainya!

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

css html if for math using this display border background github

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn