Bagaimana untuk melaksanakan poligon dalam css

Cara melaksanakan poligon dalam CSS: Mula-mula buat fail sampel HTML, kemudian laksanakan segi empat selari melalui atribut skew transformasi; segi tiga untuk melaksanakan poligon.

Persekitaran pengendalian artikel ini: sistem windows7, versi HTML5&&CSS3, komputer DELL G3

Bagaimana untuk melaksanakan poligon dalam css?

Melaksanakan poligon yang menarik

Pembangunan bahagian hadapan masih jauh lagi dalam perjalanan ke dunia web, kita mesti menghadapi poligon Pada akhirnya, Cara paling mudah adalah dengan hanya memuat naik gambar dan mulakan sebagai front-end dengan "mengejar", sudah tentu anda perlu "mendera diri" ... Hari ini kita akan bercakap tentang bagaimana untuk melaksanakan poligon. dalam pengaturcaraan bahagian hadapan Mula-mula, muat naik gambar, dan kemudian kita boleh Fikirkan cara melaksanakannya dahulu.

Rendering

"Adakah ia dilaksanakan?", "Adakah terdapat sebarang teks dalam huruf condong ke atas", "Perkataan Syurga, lebih baik awak berikan saya img terus, rasanya sangat menyusahkan." Bersantai, tarik nafas dalam-dalam dan ikuti saya untuk melihat cara menggilap CSS.

Polygon seperti label ini boleh dilihat sebagai gabungan segi empat selari dan segi tiga menegak. >

Bagaimanakah anda menukar segi empat tepat kepada segi empat selari? Ambil segi empat tepat yang diperbuat daripada dawai sebagai contoh Bagaimana anda mengubahnya menjadi segi empat selari? Seseorang menjawab: Ia sangat mudah, hanya putar belit sahaja. Ngomong-ngomong, ia adalah herotan, sifat condong pada perubahan.

transform: skew(-10deg);

Hei, seseorang bertanya pada masa ini, adakah ia tidak condong ke atas? Bagaimana untuk memecahkannya, jangan risau, lihat:

transform: skew(-10deg) rotate(-8deg)

Okay, hampir selesai , tetapi ia masih Ada segi tiga, di sini, gambar di atas:

Gunakan lebar:0;tinggi: 0

Kodnya adalah seperti berikut:

Kod segitiga

Mengapa menggunakan unsur pseudo sebelum ini? Anda tahu, untuk memudahkan susun atur, lebar dan tinggi kedua-duanya adalah 0 dengan sangat bijak, dan warna serta kedudukan sempadan digunakan untuk menetapkannya, termasuk kebanyakan poligon yang biasa anda lihat, yang merupakan prinsip yang hampir sama. Kod akhir adalah seperti berikut:

Sebagai peneroka CSS, cuba tetapkan sempadan yang berbeza, digabungkan dengan transformasi, untuk melihat kesan pintar yang ada, pentagram, oktagon... Dengan segala-galanya di hujung jari anda, serang dunia poligon.

Pembelajaran yang disyorkan: "

tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan poligon dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!