Bagaimana untuk membuat gaya kad kompleks menggunakan harta klip-laluan CSS?

CLEVERLY Gunakan CSS untuk mencipta kad yang diperibadikan: Memecahkan batasan bentuk konvensional

Dalam reka bentuk web, kad biasa digunakan elemen susun atur. Artikel ini akan meneroka cara yang mendalam bagaimana menggunakan CSS, terutamanya atribut clip-path , untuk mewujudkan gaya kad yang unik, dan menyelesaikan masalah reka bentuk bentuk yang kompleks yang sukar dicapai dengan kaedah konvensional.

Cabaran Reka Bentuk: Bentuk Kad Tidak Teratur

Ramai pereka akan menghadapi situasi ini: Bentuk kad dalam draf reka bentuk tidak teratur dan sukar dilaksanakan dengan atribut CSS yang mudah. Artikel ini akan memberikan penyelesaian untuk membantu anda dengan mudah melaksanakan bentuk kad yang rumit ini.

Penyelesaian: Atribut clip-path dan Sintaks Laluan

Harta clip-path adalah alat yang berkuasa dalam CSS yang membolehkan anda untuk klip elemen dengan pelbagai bentuk. Digabungkan dengan sintaks laluan, kita boleh mengawal bentuk kad dengan tepat.

Sintaks Jalan mengandungi satu siri arahan, seperti:

• M : Pindah ke koordinat yang ditentukan
• L : Lukis garis ke koordinat yang ditentukan
• A : Lukiskan arka elips
• Z : Tutup jalan

Berikut adalah contoh yang menunjukkan cara membuat kad yang tidak teratur menggunakan clip-path :

(Harus ada gambar rendering di sini)

Berikut adalah kod HTML dan CSS yang lengkap:

 


  <meta charset="utf-8">
  <style>
    body {
      background-color: #e9e6e6;
    }

    .container {
      position: relative;
      width: 300px;
      height: 150px;
    }

    .card {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background-color: white;
      clip-path: path("M 215, 8 A 10 10 90 0 0 205 0 L 0 0 L 0 150 L 300 150 L 300 40 A 10 10 90 0 0 290 30 L 230 30 A 10 10 90 0 1 220 22 z");
      z-index: 1;
      position: relative;
    }

    .tag {
      width: 90px;
      height: 30px;
      border-top-right-radius: 10px;
      background-color: red;
      color: white;
      position: absolute;
      right: 0;
      top: 5px;
      z-index: 0;
      text-align: center;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      padding: 10px;
    }

    .content {
      padding: 10px;
    }
  </style>


  <div class="container">
    <div class="card">
      <div class="title">Laporan Pengeluaran Produk</div>
      <div class="content">kandungan</div>
    </div>
    <div class="tag">Belum selesai</div>
  </div>

Kod ini mencipta kad yang tidak teratur dengan sudut cekung dan bulat melalui atribut clip-path dan definisi laluan yang tepat, dan menambah tajuk, kandungan, dan tag status. Anda boleh menyesuaikan arahan laluan mengikut reka bentuk sebenar untuk mencapai pelbagai bentuk kad kompleks.

Atas ialah kandungan terperinci Bagaimana untuk membuat gaya kad kompleks menggunakan harta klip-laluan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!