CSS에서 대각선으로 분할된 투톤 배경을 만드는 방법은 무엇입니까?

CSS에서 대각선으로 분할된 투톤 배경 만들기

사선으로 배경을 두 가지 색상이나 질감으로 분할 시각적으로 눈에 띄는 효과입니다. 이는 다음 예와 같이 CSS를 통해 달성할 수 있습니다.

대각선으로 분할된 배경을 만들려면 다음 단계를 따르세요.

1. 배경의 양면을 나타내는 두 개의 별도 div를 만듭니다. 배경. "왼쪽" 및 "오른쪽"과 같은 서로 다른 클래스를 할당합니다.
2. 배경색 또는 배경 이미지 속성을 사용하여 각 div에 단색 또는 질감 배경을 적용합니다.
3. div 위치 지정 float 또는 디스플레이를 사용하여 병렬: inline-block.
4. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!