Bagaimanakah Saya Boleh Mencipta Garisan Pepenjuru pada Latar Belakang Div Hanya Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Mencipta Garisan Pepenjuru pada Latar Belakang Div Hanya Menggunakan CSS?

Patricia Arquette

Lepaskan： 2024-11-26 00:38:11

asal

907 orang telah melayarinya

How Can I Create Diagonal Lines on a Div Background Using Only CSS?

Melukis Garisan Diagonal pada Latar Belakang Div dengan CSS Tulen

Untuk menambah garisan pepenjuru yang diminta pada latar belakang div tanpa menggunakan imej, gunakan penyelesaian CSS berikut:

.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%);
}

Salin selepas log masuk

Penyelesaian ini menggunakan kecerunan linear CSS3 dengan calc() untuk menyambungkan talian, memastikan automatik penskalaan kepada dimensi div. Menggunakan kecerunan membolehkan anda mencipta dua garisan pepenjuru tanpa memerlukan imej latar belakang tambahan.

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