Bagaimanakah Saya Boleh Mencipta Sudut Bersudut dengan CSS dan Mengekalkan Sempadan?

Mencipta Sudut Bersudut dengan CSS

Ramai yang berusaha untuk mencapai reka bentuk yang kompleks menggunakan CSS, dan mencipta sudut bersudut merupakan satu usaha sedemikian. Seseorang mungkin tertanya-tanya sama ada boleh menggunting imej dalam bentuk sedemikian, sama seperti menggunakan topeng yang mengekalkan jidar kelabu secara serentak.

Seseorang boleh mempertimbangkan untuk menggunakan kanvas atau SVG untuk tugasan ini. Walau bagaimanapun, adalah mungkin untuk mencapai kesan yang sama dengan CSS tulen dengan menggunakan elemen :before dan :after dalam bekas induk.

Mula-mula, tetapkan sempadan pada bekas induk. Kemudian, tambahkan elemen :before untuk menyekat sudut dan mengimbanginya dengan -1px untuk menutup sempadan. Akhir sekali, perkenalkan elemen :after dengan sedikit offset daripada :before untuk mencipta garisan dalam cut-off.

Walaupun kaedah ini, mengekalkan ketebalan garisan 45 darjah masih menjadi cabaran kecil.

Pertimbangkan kod CSS dan HTML berikut:

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

Pendekatan ini menghampiri sudut bersudut yang dikehendaki sambil mengekalkan sempadan.

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