Bagaimanakah Saya Boleh Mencipta Sudut Bulat Terbalik dalam CSS?

Mencapai Sudut Bulat Songsang dengan CSS

Dalam CSS, anda boleh mentakrifkan penjuru kiri sebelah atas elemen sebagai bulat menggunakan sempadan- harta jejari-kiri atas. Walau bagaimanapun, bagaimana jika anda mahu menyongsangkan sudut ini, mencipta kesan terbalik?

Secara tradisinya, menyongsangkan sudut bulat tidak boleh dilaksanakan dengan CSS standard. Walau bagaimanapun, penyemak imbas moden memperkenalkan penyelesaian dengan sifat imej topeng.

Penyelesaian:

Untuk menyongsangkan sudut bulat, gunakan imej topeng untuk menentukan kecerunan jejari yang mencipta potongan bulat.

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

Dalam contoh ini, bekas dengan latar belakang merah bertopeng dengan jejari kecerunan yang menghasilkan potongan bulat 10px di penjuru kiri sebelah atas. Kawasan lutsinar bertukar secara beransur-ansur kepada hitam, meliputi sudut yang tinggal.

Dengan menggunakan imej topeng, anda boleh menyongsangkan sudut bulat dengan berkesan, memberikan reka bentuk anda sentuhan yang unik dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Sudut Bulat Terbalik dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!