Bolehkah CSS `clip-path` Membulat Hanya Tiga Penjuru Kiri Bentuk?

Cara Membulat Tiga Penjuru Kiri Sahaja Menggunakan CSS clip-path

Mencipta bentuk menggunakan CSS clip-path boleh menjadi cara yang serba boleh untuk mencapai pelbagai reka bentuk. Walau bagaimanapun, membulatkan sudut tertentu boleh menjadi mencabar. Artikel ini menangani isu pembulatan tiga penjuru paling kiri bagi bentuk tersuai.

Masalah:
Pertimbangkan kod HTML dan CSS berikut:

<div></div>

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

Kod ini mencipta bentuk dengan sudut kiri tajam dan sudut kanan bulat. Untuk membulatkan secara khusus hanya tiga penjuru paling kiri, kita perlu mengubah suai sifat laluan klip.

Penyelesaian:
Untuk mencapai kesan yang diingini, kita boleh menggunakan inset() fungsi dengan sifat bulat:

-webkit-clip-path: inset(0% 45% 0% 45% round 10px);
clip-path: inset(0% 45% 0% 45% round 10px);

Fungsi inset() membolehkan kami menentukan peratusan bentuk yang akan disembunyikan dalam setiap arah, dan sifat bulat mencipta tepi bulat. Dengan memberikan jejari 10px pada sifat bulat, kami membundarkan sudut kiri atas, kiri bawah dan sudut tengah bawah.

Penyelesaian ini berkesan akan mencipta bentuk dengan tiga penjuru paling kiri bulat sambil mengekalkan sudut kanan yang tajam .

Atas ialah kandungan terperinci Bolehkah CSS `clip-path` Membulat Hanya Tiga Penjuru Kiri Bentuk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!