Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dalam CSS Hanya Menggunakan :before dan :after Pseudo-elements?

Sudut Bersudut dalam CSS: Penyelesaian Terperinci

Mencipta sudut bersudut menggunakan CSS tulen adalah mungkin, walaupun ia memberikan cabaran tertentu. Untuk mencapai matlamat ini, anda perlu menggunakan elemen :before dan :after dalam bekas induk yang mempunyai sempadan.

1. Tambah Sempadan pada Bekas: Wujudkan sempadan di sekeliling elemen kontena untuk mentakrifkan sempadan yang boleh dilihat.
2. Buat :before Elemen untuk Menyekat a Sudut: Tambah elemen :before dengan gaya atas sempadan yang dinyatakan dalam piksel untuk mencipta garis serenjang pepejal. Mengimbangi elemen ini dengan -1 piksel untuk mengambil kira sempadan bekas.
3. Tambahkan Elemen :after untuk Mencipta Garis Dalam: Memperkenalkan elemen :after dengan offset yang lebih kecil sedikit daripada elemen :sebelum. Tetapkan gaya atas sempadan unsur :selepas kepada warna yang berbeza, seperti putih, untuk mencipta garisan kontras dalam kawasan potong.

Walaupun teknik ini menghampiri kesan yang diingini, ia mungkin menimbulkan sedikit isu dengan ketebalan garisan 45 darjah.

Contoh Kod:

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

<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 Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dalam CSS Hanya Menggunakan :before dan :after Pseudo-elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!