Bagaimana untuk membuat segi empat selari dalam javascript

JavaScript ialah bahasa pengaturcaraan yang sangat berkuasa yang boleh melaksanakan pelbagai operasi. Antaranya, membuat segi empat selari adalah keperluan yang agak biasa, kerana segi empat selari boleh mempersembahkan kesan visual yang unik dan menambah beberapa hiasan yang cantik pada halaman web. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencipta segi empat selari.

Prasyarat untuk membuat segi empat tepat ialah segi empat tepat. Kita boleh mencipta segi empat tepat menggunakan HTML dan CSS seperti ini:

<div id="rectangle"></div>

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #ccc;
}

Ini menghasilkan segi empat tepat dengan lebar 200 piksel, ketinggian 100 piksel dan warna latar belakang kelabu.

Sekarang, kita perlu menukar segi empat tepat ini kepada segi empat selari. Terdapat banyak cara untuk mencapai matlamat ini, dua daripada kaedah yang lebih biasa diperkenalkan di bawah.

1. Gunakan atribut transformasi

Atribut transformasi boleh merealisasikan operasi seperti putaran, penskalaan dan anjakan elemen. Kita boleh menggunakan transform: skewX(deg); untuk mencondongkan segi empat tepat ke kanan, dengan deg mewakili sudut kecondongan. Untuk menukar segi empat tepat kepada segi empat selari, anda perlu mencondongkan sisi bertentangannya ke atas atau ke bawah pada sudut yang sama, seperti yang ditunjukkan di bawah:

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    transform: skewX(30deg);
}

Ini menjadikan segi empat tepat itu menjadi selari condong ke atas ke kanan. Jika anda mahukan segi empat selari yang condong ke bawah, anda boleh menukar deg kepada nilai negatif. Perlu diingat bahawa kerana lebar segi empat tepat diubah, ia boleh menyebabkan masalah susun atur.

2. Gunakan atribut laluan klip CSS

Atribut laluan klip boleh mengawal kawasan keratan elemen dan mencapai pemotongan bentuk elemen. Kita boleh menggunakan laluan klip: poligon(x1 y1, x2 y2, x3 y3, x4 y4); Antaranya, x1 y1, x2 y2, x3 y3, x4 y4 mewakili empat koordinat bucu selari. Kaedah pengiraan nilai koordinat tertentu boleh dicari sendiri.

#rectangle {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    clip-path: polygon(0 0, 200px 30px, 200px 100px, 0 70px);
}

Ini menjadikan segi empat tepat kepada segi empat selari sebelah kanan atas. Perlu diingatkan bahawa memandangkan atribut laluan klip tidak disokong oleh semua penyemak imbas, isu keserasian mungkin berlaku pada sesetengah penyemak imbas.

Ringkasan

Tidaklah sukar untuk mencipta segi empat selari menggunakan JavaScript. Kita boleh menggunakan atribut transformasi CSS atau atribut clip-path untuk memilih mengikut keperluan kita. Sudah tentu, kaedah yang berbeza mempunyai kelebihan dan kekurangan mereka sendiri, dan anda perlu memilih mengikut keadaan sebenar. Saya harap artikel ini dapat membantu semua orang, terima kasih kerana membaca!

Atas ialah kandungan terperinci Bagaimana untuk membuat segi empat selari dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!