Terokai beberapa cara untuk membuat sempadan tidak sekata menggunakan CSS

Sempadan Tidak Teratur CSS

Dengan kemajuan berterusan dan inovasi reka bentuk web, kadangkala sempadan segi empat sama atau bulat biasa tidak lagi dapat memenuhi keperluan reka bentuk web. Pembangunan CSS telah memungkinkan sempadan yang tidak teratur, dan ia semakin digunakan dalam reka bentuk web moden. Dalam artikel ini, kami akan meneroka beberapa cara untuk membuat sempadan tidak teratur menggunakan CSS.

1. Menggunakan clip-path

Clip-path ialah sifat CSS yang digunakan untuk klip imej atau elemen bersaiz tetap. Ia membenarkan pembangun untuk menentukan laluan keratan supaya hanya bahagian objek dalam laluan dipaparkan. Oleh itu, kita boleh mencipta bentuk tidak sekata dengan menggunakan laluan keratan pada elemen.

Kod sampel untuk menggunakan laluan klip untuk mencipta sempadan tidak sekata adalah seperti berikut:

.clip-path-example {
  background-color: #333333;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

Gaya di atas akan mencipta laluan keratan, yang mengubah bentuk elemen menjadi poligon tidak sekata, oleh itu Cipta bentuk sempadan yang luar biasa (ditunjukkan dalam Rajah 1).

Rajah 1. Sempadan tidak sekata dibuat menggunakan laluan klip

2. Gunakan unsur pseudo (unsur pseudo)

Satu lagi A cara biasa untuk mencipta sempadan yang tidak teratur ialah menggunakan unsur pseudo untuk mensimulasikan sempadan. Kita boleh memanfaatkan sifat unsur pseudo, meletakkannya di luar sempadan elemen dan menggunakan gaya CSS untuk mencipta bentuk sempadan yang diingini.

Kod contoh untuk menggunakan unsur pseudo untuk mencipta sempadan tidak sekata adalah seperti berikut:

.pseudo-element-example {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #333333;
  overflow: hidden;
}
.pseudo-element-example::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  width: 230px;
  height: 230px;
  background-color: #ffffff;
  border-radius: 50%;
}

Gaya di atas akan mencipta elemen pseudo yang terapung di luar elemen dan ia ditetapkan kepada bulat dan putih , menggunakan atribut limpahan untuk menyembunyikan bahagian yang dipangkas, dengan itu mencipta bentuk sempadan yang luar biasa (seperti ditunjukkan dalam Rajah 2).

Rajah 2. Sempadan tidak teratur dibuat menggunakan unsur pseudo

3. Gunakan laluan SVG (laluan SVG)

SVG (Grafik Vektor Boleh Skala. ) ialah format grafik vektor yang membolehkan kami mencipta grafik hampir semua bentuk. Kita boleh menggunakan elemen laluan SVG untuk mencipta bentuk sempadan yang tidak sekata dan menggunakannya pada elemen.

Kod sampel untuk menggunakan laluan SVG untuk mencipta sempadan tidak sekata adalah seperti berikut:

.svg-path-example {
  background-color: #333333;
  mask-image: url('data:image/svg+xml;utf8,<svg><path></path></svg>');
}

Gaya di atas akan mencipta elemen laluan SVG yang mentakrifkan bentuk tidak sekata, menggunakan topeng- teknik imej digunakan pada elemen, mencipta bentuk sempadan yang luar biasa (ditunjukkan dalam Rajah 3).

Rajah 3. Sempadan tidak teratur yang dibuat menggunakan laluan SVG

Kesimpulan

Dalam artikel ini, kami membincangkan tiga cara untuk menggunakan Kaedah CSS untuk buat sempadan tidak teratur: laluan klip, unsur pseudo dan laluan SVG. Setiap kaedah ini mempunyai kebaikan dan keburukan, dan reka bentuk yang lebih kreatif dan kompleks boleh dicapai menggunakan teknik dan alat yang berbeza. Mana-mana kaedah yang anda gunakan, ingat untuk mempertimbangkan keserasian penyemak imbas dan isu prestasi dan pastikan halaman anda dipaparkan dengan betul pada semua peranti.

Atas ialah kandungan terperinci Terokai beberapa cara untuk membuat sempadan tidak sekata menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!