CSS 의사 요소를 사용하여 기울어진 배경을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 의사 요소를 사용하여 기울어진 배경을 만드는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-09 02:09:02

원래의

828명이 탐색했습니다.

How to Create a Slanted Background Using CSS Pseudo Elements?

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

로그인 후 복사

이 코드는 왼쪽에 斜斜背景를 생성합니다. 컨테이너의 측면. 변환: 기울이기(-30deg) 속성은 의사 요소를 기울여 원하는 기울기를 얻습니다.

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