Bagaimana Membuat Bulatan dengan Hujung Melengkung Menggunakan CSS dan SVG?

CSS Sempadan Melengkung: Capai Bulatan dengan Hujung Melengkung

Apabila menyesuaikan estetika tapak web, cabaran biasa terletak pada mencipta bentuk dan sempadan yang kompleks. Satu permintaan khusus melibatkan membuat sempadan yang membentuk bulatan dengan hujung melengkung.

Untuk menangani perkara ini, kami meneroka penyelesaian menggunakan SVG sebagai latar belakang untuk elemen sempadan. SVG (Grafik Vektor Boleh Skala) membolehkan anda mencipta bentuk dan kecerunan rumit yang mudah berskala dan mudah alih merentas peranti yang berbeza.

Berikut ialah pecahan yang disemak semula kod:

CSS:

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,
                <svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'>
                <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
                </svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

HTML:

<div>

Penjelasan:

1. Kami menambah SVG sebagai imej latar belakang elemen .circle. Bentuk SVG mentakrifkan hujung melengkung bulatan.
2. Kami meletakkan elemen .bulatan sedikit di atas bar bawah untuk mencipta ilusi lengkung berterusan.
3. SVG diletakkan di luar utama kandungan untuk organisasi yang lebih baik.

Kod yang dikemas kini ini membolehkan kami mencapai hasil yang diingini, menyediakan sempadan bulat dengan hujung melengkung, menyerupai contoh yang disediakan dalam soalan asal.

Atas ialah kandungan terperinci Bagaimana Membuat Bulatan dengan Hujung Melengkung Menggunakan CSS dan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!