Bolehkah CSS Mencipta Sudut Bersudut dan Imej Klip Semasa Mengekalkan Sempadan Yang Boleh Dilihat?

Penciptaan Sudut Bersudut CSS dan Keratan Imej

Bolehkah CSS digunakan untuk mencipta bentuk tertentu, yang melibatkan sudut bersudut 45 darjah? Selain itu, keperluan itu termasuk menggunting imej dalam bentuk, sama seperti menggunakan topeng di mana sempadan kelabu kekal kelihatan.

Meneroka kebolehlaksanaan tugas ini dengan ketat dalam CSS, menjadi jelas bahawa mengekalkan sempadan menimbulkan cabaran. Namun begitu, penyelesaian telah direka menggunakan elemen pseudo :sebelum dan :selepas bersama-sama dengan bekas induk. Memandangkan :before dan :after tidak boleh digunakan terus pada teg img, pendekatan berikut digunakan:

1. Tetapkan sempadan untuk elemen kontena.
2. Buat elemen :before untuk menghalang sudut dan mengimbangi kedudukannya sebanyak -1px untuk menyembunyikan sempadan.
3. Tambah elemen :selepas dengan sedikit mengimbangi daripada elemen :before untuk menjana garisan di dalam keratan.

Walaupun pendekatan ini menghampiri kesan yang diingini, ia menghadapi masalah dengan ketebalan garisan bersudut 45 darjah. Berikut ialah coretan kod CSS:

.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;
}

Dan berikut ialah contoh HTML:

<div class="cutCorner">
  <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

Atas ialah kandungan terperinci Bolehkah CSS Mencipta Sudut Bersudut dan Imej Klip Semasa Mengekalkan Sempadan Yang Boleh Dilihat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!