Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencipta Bentuk Lengkung Lutsinar dengan Sisi Bulat Menggunakan CSS Radial-gradient?

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

Patricia Arquette
Lepaskan: 2024-12-10 16:45:14
asal
465 orang telah melayarinya

How to Create a Transparent Curved Shape with Rounded Sides Using 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);
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan