CSS를 사용하여 기울어진 배경을 어떻게 만듭니까?

CSS에서 기울어진 배경 만들기

웹 디자인 영역에서 시각적으로 매력적이고 역동적인 레이아웃을 만들려면 특이한 모양과 그라데이션을 통합해야 하는 경우가 많습니다. . 이러한 과제 중 하나는 기울어진 배경이나 대각선 배경을 만드는 것입니다. 이를 통해 웹사이트에 독특한 느낌을 더할 수 있습니다. 복잡해 보일 수도 있지만 CSS를 사용하여 이 효과를 얻는 것은 놀라울 정도로 간단합니다.

이 세부 가이드에서는 CSS를 사용하여 기울어진 배경을 만드는 단계를 안내합니다. 사용자가 제공한 예에서는 배경을 두 개의 대비되는 색상으로 나누는 대각선을 보여줍니다. 이 효과를 재현하기 위해 의사 요소를 활용하고 기울이기 변환을 적용합니다.

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

이 코드에서:

• body 요소는 페이지 높이를 100으로 설정합니다. 뷰포트 높이의 %, 여백을 제거하고 노란색 배경을 적용합니다.
• body:before 의사 요소는 body의 첫 번째 하위 요소 앞에 새 요소를 생성합니다. 빈 콘텐츠 값(content: "")이 지정되어 빈 컨테이너가 됩니다.
• 의사 요소를 절대적으로(position: 절대) 배치하여 페이지의 높이와 너비를 덮고 정렬합니다. 왼쪽 가장자리(왼쪽: 0; 너비: 300px;).
• 배경색(배경: #000)을 검정색으로 설정하여 경사진 부분을 만듭니다.
• 변환: 기울이기(- 30deg) 속성은 요소를 수평으로 -30도 기울여 대각선 경사를 만듭니다.
• transform-origin:top은 기울이기 변환이 시작되는 지점을 지정합니다. 이 경우에는 요소의 상단입니다.

기울기 변형의 각도와 의사 요소의 위치를 ​​조정하여 기울어진 배경의 모양과 크기를 사용자에 맞게 맞춤 설정할 수 있습니다. 디자인이 필요합니다.

위 내용은 CSS를 사용하여 기울어진 배경을 어떻게 만듭니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!