Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencipta latar belakang CSS dua tona dengan garis pepenjuru?

Bagaimana untuk mencipta latar belakang CSS dua tona dengan garis pepenjuru?

Susan Sarandon
Susan Sarandonasal
2024-11-01 12:47:02666semak imbas

How to create a two-toned CSS background with a diagonal line?

Garisan Diagonal Membahagikan Latar Belakang CSS Dua-Tona

Mencapai latar belakang dengan berbilang warna yang dipisahkan oleh garis pepenjuru memerlukan pendekatan kreatif. Berikut ialah kaedah yang menggunakan DIV berasingan:

Kod yang disediakan menggunakan kecerunan latar belakang dengan peralihan keras untuk mencipta bahagian:

<code class="css">.diagonal-split-background {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

Penyelesaian ini menawarkan peralihan yang bersih dan lancar antara kedua-dua warna latar belakang. Dengan melaraskan sudut dan nilai warna, anda boleh menyesuaikan rupa garis pepenjuru dan warna kontras.

Atas ialah kandungan terperinci Bagaimana untuk mencipta latar belakang CSS dua tona dengan garis pepenjuru?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn