Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dengan Sempadan Terpelihara Menggunakan CSS Tulen?

CSS Angled Corners: A Deep Dive

Mencipta sudut bersudut menggunakan CSS tulen boleh menjadi tugas yang mencabar, terutamanya apabila ia datang untuk memelihara sempadan. Walau bagaimanapun, dengan manipulasi berhati-hati terhadap elemen :sebelum dan :selepas, adalah mungkin untuk mencapai anggaran yang hampir.

Langkah 1: Bekas dengan Sempadan

Mulakan dengan menambah jidar ke bekas yang memegang bentuk bersudut yang diingini.

Langkah 2: :sebelum untuk Corner Blackout

Seterusnya, cipta elemen :before untuk menyekat sudut tertentu. Untuk memastikan ia meliputi sempadan, mengimbanginya dengan -1px.

Langkah 3: :selepas untuk Garisan Dalam

Untuk garisan bersudut dalam sudut potong, memperkenalkan elemen :selepas. Imbangi ini sedikit daripada elemen :before.

Kod Contoh:

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}
.cutCorner img {
  display: block;
}
.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: '';
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}
.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: '';
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

Seperti yang dinyatakan dalam penyelesaian, mengekalkan ketebalan garisan 45 darjah boleh sesuatu isu. Walau bagaimanapun, pendekatan ini menyediakan penyelesaian yang boleh digunakan untuk mencipta sudut bersudut dengan sempadan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dengan Sempadan Terpelihara Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!