Bagaimana Membuat Bentuk Trapezoid Responsif Menggunakan CSS, SVG atau Kanvas?

Bentuk Trapezoid Responsif dalam CSS, SVG dan Kanvas

Soalan:

Bagaimana boleh Saya mencipta bentuk trapezoid responsif menggunakan CSS, SVG atau Kanvas?

Jawapan:

Terdapat beberapa kaedah untuk mencipta trapezoid dengan kelebihan dan had yang berbeza. Berikut ialah beberapa pilihan responsif:

Sempadan CSS:

Menggunakan sempadan CSS ialah pendekatan yang paling banyak disokong, serasi dengan IE dan semua penyemak imbas moden pada desktop dan mudah alih.

HTML:

<div>

CSS:

#trapezoid {
  border-left: 20vw solid red;
  border-top: 5vw solid transparent;
  border-bottom: 5vw solid transparent;
  width: 0;
  height: 10vw;
}

Kelebihan:

• Pelayar yang sangat baik sokongan
• Mudah untuk dilaksanakan

Kelemahan:

• Sempadan mempunyai beberapa had, seperti sudut bulat

Atas ialah kandungan terperinci Bagaimana Membuat Bentuk Trapezoid Responsif Menggunakan CSS, SVG atau Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!