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;
}

이 기술은 뷰포트의 왼쪽 상단에 배치되는 기울어진 요소를 만듭니다. 요소의 폭과 기울기 각도를 조절하여 요구 사항에 맞게 기울기를 맞춤 설정할 수 있습니다.

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