Bagaimana untuk Mencipta Bentuk Lengkung Lutsinar dengan Sisi Bulat Menggunakan CSS Radial-gradient?

Bentuk Lengkung Telus CSS dengan Dua Sisi Bulat

Mencipta bentuk melengkung dan lutsinar boleh menjadi satu cabaran, terutamanya apabila anda ingin membulat sisi. Dalam artikel ini, kami akan meneroka penyelesaian menggunakan kecerunan jejari.

Percubaan Awal

Pada mulanya, anda cuba mencipta bentuk melengkung menggunakan gabungan kedudukan mutlak dan jejari sempadan melengkung. Walau bagaimanapun, latar belakang kekal legap, menghalang warna latar belakang biru daripada ditunjukkan.

Penyelesaian Menggunakan Kecerunan Jejari

Penyelesaian yang lebih baik ialah menggunakan kecerunan jejarian untuk mencipta ilusi bentuk telus dan melengkung. Kecerunan jejari membolehkan anda mentakrifkan kecerunan yang bermula dari titik tertentu dan memancar ke luar.

CSS:

.box {
  width: 200px;
  height: 100px;
  background: white;
}
.box .top {
  height: 100px;
  width: 150px;
  transform: translateY(-100%);
  background: #fff;
  position: relative;
}

.top:before,
.top:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  left: 100%;
  bottom: 50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%, transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%, #fff 100%) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

.top:after {
  transform-origin: bottom;
  transform: scaleY(-1);
}

Penjelasan

Elemen .box berfungsi sebagai bekas untuk bentuk melengkung. Di dalamnya, elemen .top diletakkan secara mutlak dan diterjemahkan ke atas (-100%) untuk mencipta bentuk.

Elemen .top mempunyai dua unsur pseudo (::sebelum dan ::selepas) yang mencipta kesan melengkung menggunakan radial-gradient. Elemen pseudo ini diletakkan di sudut kiri atas dan sudut kanan bawah elemen .atas, dengan lebar 50px.

Kecerunan jejari ditakrifkan untuk bermula dari kiri atas dan bawah- sudut kanan, masing-masing. Kecerunan pertama mencipta bahagian putih (legap) di sebelah kanan, pudar menjadi lutsinar 2% di atas tepi bawah. Kecerunan kedua melakukan sebaliknya, mencipta bahagian lutsinar di sebelah kiri dan bahagian putih di bahagian bawah.

Dengan menggabungkan kecerunan ini, ilusi bentuk lutsinar melengkung tercipta.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bentuk Lengkung Lutsinar dengan Sisi Bulat Menggunakan CSS Radial-gradient?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!