Melukis Bendera Taiwan dengan CSS-tutorial css-php.cn

Melukis Bendera Taiwan dengan CSS

Mary-Kate Olsen

Lepaskan： 2024-11-24 11:24:11

asal

231 orang telah melayarinya

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>

Salin selepas log masuk

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);
}

Salin selepas log masuk

Drawing Taiwan

Matahari

Ok, bahagian yang paling mudah sudah selesai. Kini tiba masanya untuk urusan sebenar. Matahari di atas bendera.
Drawing Taiwan
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.

bintang 12 rasuk putih
bulatan putih dengan sempadan biru

Drawing Taiwan

Drawing Taiwan
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.

Drawing Taiwan
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! ?

Drawing Taiwan

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

Drawing Taiwan

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>

Salin selepas log masuk

Drawing Taiwan

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);
}

Salin selepas log masuk

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%);;
  }

Salin selepas log masuk

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!