Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dalam CSS Tanpa Menggunakan SVG atau Kanvas?

Sudut Bersudut dalam CSS: Teknik Terdepan

Merancang tapak web yang menarik dari segi estetik boleh mencabar, terutamanya apabila ia datang untuk mencipta sudut sudut. Walau bagaimanapun, dengan kemajuan dalam CSS, kini anda boleh mencapai kesan ini tanpa menggunakan kaedah bukan asli seperti SVG atau kanvas.

Mencipta Sudut Bersudut

Untuk mencipta sudut bersudut, kita boleh memanfaatkan elemen pseudo :sebelum dan :selepas bersama bekas induk. Dengan memanipulasi kedudukan, gaya sempadan dan pengimbangan elemen ini, kami boleh menyekat sudut dengan berkesan sambil mengekalkan sempadan.

Langkah 1: Sempadan Kontena

Mulakan dengan menambahkan sempadan pada elemen kontena untuk menentukan sempadan luar sudut kami sudut.

Langkah 2: :sebelum Pseudo-Element

Seterusnya, tambahkan :before pseudo-element untuk memotong sudut yang dikehendaki. Letakkannya secara mutlak, dengan offset negatif sebanyak -1px untuk menutup sempadan. Gunakan sempadan pepejal di bahagian atas dan sempadan lutsinar di sebelah kanan untuk mencipta garisan senget.

Langkah 3: :selepas Elemen Pseudo

Untuk mencipta garisan di dalam cut-off, tambahkan :after pseudo-element dengan offset yang lebih kecil sedikit sebanyak -2px. Berikannya sempadan putih pepejal di bahagian atas dan sempadan lutsinar di sebelah kanan.

Contoh Pelaksanaan

Kod CSS berikut menunjukkan cara menggunakan prinsip ini:

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

Kod ini boleh digunakan untuk membungkus elemen imej dalam bekas, menghasilkan imej dengan sudut yang ditentukan sudut.

Pendekatan Alternatif

Walaupun teknik CSS boleh memberikan penyelesaian, jika kawalan tepat ke atas sudut bersudut diperlukan atau ciri tambahan seperti topeng atau keratan imej dikehendaki, menggunakan SVG atau kanvas mungkin pendekatan yang lebih sesuai.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dalam CSS Tanpa Menggunakan SVG atau Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!