Bagaimana untuk mencipta beberapa bentuk tidak sekata CSS3 biasa

Reka bentuk grafik tidak teratur CSS3 menjadi semakin popular dalam reka bentuk halaman web moden. Membuat reka bentuk yang tidak teratur telah menjadi semakin mudah dan boleh dicapai tanpa menggunakan JavaScript atau skrip back-end. Pelaksanaan ini dipanggil ketidakteraturan CSS3.

Kelebihan ketidakteraturan CSS3 ialah fleksibiliti dan responsifnya. Kami boleh membuat halaman responsif sempurna untuk resolusi peranti yang berbeza. Di samping itu, reka bentuk tidak teratur yang baik boleh menambah beberapa gaya unik pada tapak web anda.

Membuat bentuk tidak sekata CSS3 adalah mudah, cuma potong bentuk yang anda mahu dan tambahkan warna di sekelilingnya atau gunakan imej latar belakang untuk menjadikannya kelihatan lebih menarik.

Sekarang, mari kita lihat cara mencipta beberapa bentuk tidak sekata CSS3 biasa.

1. Segitiga

Segitiga ialah salah satu bentuk paling asas dalam grafik tidak sekata CSS3. Ia boleh dibuat dengan kod berikut:

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

2. Trapezoid

Trapezoid juga merupakan bentuk ringkas, serupa dengan segitiga. Tetapi tidak seperti segitiga, trapezoid mempunyai dua sisi pendek dan dua sisi panjang.

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

3. Parallelogram

Paralelogram ialah bentuk tak sekata ringkas yang boleh dibuat dengan kod berikut:

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

4. Oval

Oval ialah satu lagi bentuk CSS3 tidak sekata yang boleh dibuat dengan:

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

5. Polygon

Kita boleh mencipta lima- bintang runcing dengan kod berikut:

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

Ringkasan

reka bentuk grafik tidak teratur CSS3 tidak sukar. Dengan alatan yang betul dan beberapa pengetahuan asas, mudah untuk mencipta bentuk yang ringkas. Dalam reka bentuk halaman web, reka bentuk grafik yang tidak teratur boleh menambah beberapa gaya unik pada halaman, dengan itu membawa pengalaman pengguna yang lebih baik ke tapak web kami.

Atas ialah kandungan terperinci Bagaimana untuk mencipta beberapa bentuk tidak sekata CSS3 biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!