Bagaimana untuk membahagikan bulatan kepada separuh pada bahagian hadapan web

Dalam reka bentuk bahagian hadapan web, bulatan digunakan secara meluas. Antaranya, reka bentuk membahagikan bulatan kepada dua bahagian telah menjadi semakin popular sejak beberapa tahun kebelakangan ini. Pereka web menggunakan teknik reka bentuk ini untuk meningkatkan daya tarikan visual halaman web sambil mengekalkan kesederhanaannya. Artikel ini akan memperkenalkan beberapa cara untuk membelah bulatan kepada separuh dalam bahagian hadapan web.

Kaedah 1: Gunakan CSS Borders

Kaedah pertama ialah menggunakan CSS Borders. Dalam kes ini, kita boleh membahagikan bekas bulat kepada dua bahagian dengan mewakili bahagian atas dan bawah bekas bulat dengan warna sempadan yang berbeza. Kita boleh mencipta kesan ini dengan menetapkan sempadan separuh atas yang lebih luas dan sempadan separuh bawah yang lebih sempit.

Berikut ialah beberapa kod CSS yang digunakan untuk mencipta kesan ini:

<code>.container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 15px solid black;
  border-bottom: none;
}

.top {
  border-color: red;
}</code>

Dalam kod di atas, kami telah mencipta elemen div bernama .container yang ditetapkan dengan menetapkan harta border-radius mengubahnya menjadi bekas bulat. Kami kemudian membahagikannya kepada separuh dengan menetapkan sempadan atas dan bawah atribut border. Akhir sekali, kami menggunakan kelas .top untuk menetapkan warna sempadan bahagian atas kepada merah.

Kaedah 2: Gunakan CSS Transforms

Kaedah kedua ialah menggunakan CSS Transforms. Dalam kes ini, anda boleh menggunakan atribut transform: skew() dan elemen pseudo :before dan :after untuk membelah bekas bulat kepada separuh.

Berikut ialah beberapa kod CSS yang digunakan untuk mencipta kesan ini:

<code>.container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.container:before, .container:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  transform-origin: center center;
  transform: skew(45deg);
}

.container:before {
  left: 0;
  background: black;
}

.container:after {
  right: 0;
  background: red;
  transform: skew(-45deg);
}</code>

Dalam kod di atas, kami telah mencipta elemen div bernama .container yang ditetapkan dengan menetapkan harta border-radius mengubahnya menjadi bekas bulat. Kami kemudian menggunakan :before dan :after elemen pseudo untuk mencipta bahagian atas dan bawah. Kita boleh mencipta kesan ini dengan menetapkan lebar dan atribut transform: skew()nya.

Kaedah Ketiga: Gunakan SVG

Kaedah ketiga ialah menggunakan SVG. Dalam kes ini, anda boleh menggunakan elemen <path> untuk mencipta laluan separuh bulatan dan menggabungkannya dengan elemen SVG lain untuk mencipta kesan pemisah.

Berikut ialah beberapa kod HTML dan SVG yang digunakan untuk mencipta kesan ini:

<code><div class="container">
  <svg viewBox="0 0 100 100">
    <path d="M50,0 A50,50 0 0 1 100,50 L50,50 Z" fill="black"></path>
    <circle r="50" cx="50" cy="50" fill="none" stroke="black"></circle>
  </svg>
</div></code>

Dalam kod di atas, kami telah mencipta elemen div bernama .container dan meletakkannya di dalam Tambah SVG unsur kepadanya. Kami kemudian mencipta laluan separuh bulatan menggunakan elemen <path> dan menetapkan warnanya kepada hitam menggunakan warna isian. Akhir sekali, kami mencipta kesan ini dengan menggunakan elemen bulat dan meletakkannya di dalam bekas bulat.

Kesimpulan

Dalam reka bentuk bahagian hadapan web, penggunaan bekas bulat adalah sangat biasa. Membahagikan bekas bulat kepada separuh boleh meningkatkan daya tarikan visual halaman sambil mengekalkannya dengan mudah. Artikel ini menerangkan tiga cara untuk membahagikan bekas bulat kepada dua bahagian dalam bahagian hadapan web: menggunakan sempadan CSS, menggunakan Transformasi CSS dan menggunakan SVG. Setiap kaedah mempunyai kelebihan dan kekurangannya, dan anda boleh memilih kaedah yang sesuai dengan anda berdasarkan keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk membahagikan bulatan kepada separuh pada bahagian hadapan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!