如何在 CSS 中創建由對角線分割的雙色調背景？-css教學-PHP中文網

如何在 CSS 中創建由對角線分割的雙色調背景？

Patricia Arquette

發布： 2024-11-03 18:06:30

原創

803 人瀏覽過

How to Create a Two-Tone Background Split by a Diagonal Line in CSS?

在CSS 中創建由對角線分割的雙色調背景

用對角線將背景分割為兩種不同的顏色或紋理是一種視覺上引人注目的效果。這可以透過 CSS 來實現，如下例所示。

要建立對角分割背景，請按照以下步驟操作：

建立兩個單獨的 div 來表示背景的兩側背景。為它們分配不同的類，例如“左”和“右”。
使用背景顏色或背景影像屬性將純色或紋理背景套用至每個 div。
定位 div並排使用 float 或 display: inline-block。
使用 background-image 屬性將線性漸層應用於背景。使用硬過渡在顏色或紋理之間創建銳利的對角線。

以下是範例程式碼片段：

<code class="css">.diagonal-split-background {
  width: 50%;
  height: 100vh;
  float: left;
}

.left {
  background-color: #013A6B;
}

.right {
  background-image: url("texture.jpg");
}

.diagonal-split-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

登入後複製

此程式碼建立具有純色的對角分割背景左側為灰色，右側為紋理。對角線是使用 30 度線性漸變創建的。

以上是如何在 CSS 中創建由對角線分割的雙色調背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！