Bagaimana untuk Membuat Kotak Beveled dalam CSS?

Kotak Serong dalam CSS

Mencipta kotak dengan sudut serong dalam CSS ialah keperluan biasa. Kesukaran untuk mencapai kesan ini bergantung pada saiz serong.

Untuk serong yang lebih kecil, anda boleh menggunakan atribut bayang-kotak. Untuk serong yang lebih besar, teknik yang lebih kompleks diperlukan.

Menggunakan Poligon CSS

Sifat poligon telah diperkenalkan dalam CSS3, yang menjadikan pembuatan serong lebih mudah. Menggunakan poligon, anda boleh menentukan bentuk tersuai yang termasuk serong.

<code class="css">.cornered {
  width: 160px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0 0, 0 40px, 40px 80px, 80px 0);
}</code>

Gunakan sempadan lutsinar

Cara lain ialah menggunakan sempadan lutsinar. Anda boleh mencipta kesan serong dengan meletakkan sempadan lutsinar dalam bekas dengan warna latar belakang.

<code class="css">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid transparent;
}

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Kaedah ini berguna untuk mencipta serong yang lebih kecil dan amat berguna apabila bekerja dengan teks.

Menggunakan perpustakaan pihak ketiga

Terdapat juga banyak perpustakaan pihak ketiga yang boleh digunakan untuk membuat kotak dengan sudut serong. Perpustakaan ini menyediakan cara yang mudah untuk mencapai kesan ini tanpa perlu menulis CSS sendiri.

Beberapa perpustakaan popular termasuk:

• [Slantastic](https://meyerweb.com/eric/css/edge/slantastic/)
• [Trianglify ] (https://github.com/qrohlf/trianglify)
• [Polygon](https://github.com/polygonjs/polygon.js)

Atas ialah kandungan terperinci Bagaimana untuk Membuat Kotak Beveled dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!