Bagaimanakah Saya Boleh Mencipta Garis Pepenjuru dalam Latar Belakang Div Menggunakan CSS?

Membuat Garisan Diagonal dalam Latar Belakang Div dengan CSS

Selalunya, anda menghadapi situasi di mana anda ingin merapikan penampilan div dengan menambah garis pepenjuru ke latar belakangnya. Ini boleh menambahkan sentuhan kreatif pada reka bentuk anda, meningkatkan daya tarikan visualnya. Menariknya, mencapai kesan ini agak boleh dilaksanakan dengan teknik CSS yang betul. Artikel ini menyediakan panduan yang komprehensif tentang cara mendekati tugas ini dengan berkesan.

Dalam pertanyaan anda, anda menerangkan keperluan untuk mencipta garisan pepenjuru yang serupa dengan yang digambarkan dalam imej yang disediakan. Walaupun mengekalkan imej latar belakang adalah penting, menambah garis pepenjuru yang melengkapkan reka bentuk sedia ada boleh meningkatkan estetika keseluruhan.

Menggunakan Kecerunan Linear dan Calc()

Untuk menangani perkara ini cabaran, kecerunan linear CSS3 digabungkan dengan calc() menawarkan penyelesaian yang elegan. Kecerunan linear membolehkan anda mencipta peralihan warna yang lancar sepanjang arah yang ditentukan. Dalam kes ini, kami akan menggunakan dua kecerunan linear untuk membentuk garis pepenjuru.

Fungsi calc() membolehkan kami mengira nilai secara dinamik, memastikan skala garisan dan melaraskan agar sesuai dengan dimensi div kami. Coretan CSS berikut menggambarkan cara ini boleh dicapai:

.crossed {
  background:
    linear-gradient(to top left,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 0.8px),
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) calc(50% + 0.8px),
      rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 0.8px),
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0) calc(50% + 0.8px),
      rgba(0, 0, 0, 0) 100%);
}

Kod CSS ini mencipta dua kecerunan linear, satu bersudut ke kiri atas dan satu lagi ke arah kanan atas. Fungsi calc() memastikan bahawa pusat garisan diselaraskan dengan titik tengah div, dengan sedikit offset 0.8px untuk mencipta kesan pepenjuru.

Dengan menggunakan kelas 'bersilang' pada div , seperti yang ditunjukkan dalam kod HTML berikut, garis pepenjuru akan muncul dalam latar belakang div:

<textarea class="crossed"></textarea>

Ingat untuk laraskan nilai warna dalam kecerunan linear agar sepadan dengan warna garisan yang anda inginkan. Dengan penyelesaian ini, anda boleh dengan mudah menambah garis pepenjuru pada mana-mana latar belakang div, menambahkan sentuhan unik dan menarik secara visual pada reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Garis Pepenjuru dalam Latar Belakang Div Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!