개시하다

"배경 비스듬한 CSS"등으로 Google을 검색하면 위쪽에서 성공합니다.
UNORTHODOX WORKBOOK "CSS를 통해서만 배경을 전체적으로 기울이는 방법"
구문을 사용합니다.

이런 느낌의 비스듬한 배경.
기사를 읽고 궁금한 점을 정리해봤습니다.

프레젠테이션 코드에 대한 대략적인 이해

demo.html

<section class="contents">
    <div class="contents_inner">
      <!-- ここはコンテンツ -->
    </div>
</section>

demo.css

.contents {
  position: relative;
  overflow: hidden;
  margin: 10% 0;
  padding: 80px 0;
}

.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #011931;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  color: #fff;
  text-align: center;
}

구조가 매우 간단하다
색상이 있는 블록 요소 만들기(by 위조 요소)
회전시키고 기울여 놓기 (by transform,z-idex)
위치 조정 등 (by overflow,margin,)
내 생각에는 오직
그나저나 프레젠테이션 코드대로 만들면 이런 느낌이 든다.

데모 코드 이해에 필요한 CSS 지식

초기초적 기초(margin과padding의 사용 방법 등)에 대한 설명은 생략되었다.

위조 요소(: before)

: 위조원소(:before)는 지정한 원소 다음에 삽입된 위조원소를 가리킨다.
demo.css

.contents:before {
  content: '';
  （中略）
}

다음과 같이 콘텐츠 다음에 위조 요소가 생성됩니다.

CSS를 통해 위조 요소의 높이, 너비, 색상 등을 지정할 수 있기 때문에 주로 장식 등에 사용된다.이번 경우 안은 빈 (content:')의 네이비 블록 요소입니다.
참조: css 초보자 이탈?:기본적 용법
참조: 매우 편리한 CSS의 before/after 위조 요소

position

position을 사용하여 요소의 위치를 지정합니다.
absolute를 사용하면position:relative를 기록하는 부모 요소를 기준으로 좌표에 위치를 지정할 수 있습니다.
이번에position:relative가 지정한 부요소contents의, 위에서 0px, 왼쪽에서 0px까지의 위치에contents의 위요소를 설정합니다.
demo.css

.contents {
  position: relative;
  （中略）
}

.contents:before {
  (中略)
  position: absolute;
  top: 0;
  left: 0;
  (中略)
}

참조: CSS 기본position 속성 사용 방법
참조: CSS:position의 absolute relative fixed 참조

overflow: hideen

overflow 속성은 내용을 상자에 들어갈 수 없는 경우 초과 부분의 표시 방식을 지정하는 데 사용됩니다.
(중략)
visible
상자에 표시됩니다.이 값은 초기 값입니다.또한 Internet Explorer에서는 컨텐트 오버가 아니라 컨텐트에 따라 상자를 확장합니다.
scroll
들어갈 수 없는 내용을 스크롤해서 볼 수 있습니다.
hidden
초과 부분이 표시되지 않습니다.
auto
브라우저에 따라 다릅니다. 일반적으로 스크롤하여 볼 수 있습니다.
참조: HTML 빠른 참조 오버플로우
그렇다고 들었습니다.이번에는 의심 요소가 초과된 부분을 드러내지 않기 위해 사용했다.
이렇게 달라졌나요?

Transform 공급업체 접두사(-webkit-,-ms-)

Transform-origin이 지정한 축에서transform:rotate로 요소를 회전합니다.
공급업체 접두사는 브라우저에 대응하기 위해 쓴 것 같습니다.
transform...요소에 2D 변형 또는 3D 변형 적용
(중략)
transform 속성은 요소에 2D 변형 또는 3D 변형을 적용하는 데 사용됩니다.
transform 속성의 값에 대해 지정된 준비된transform 함수를 통해 원소에 행렬 변형, 이동, 축척, 회전, 경사 등의 변형을 적용할 수 있다.
참조: HTML 빠른 참조transform
이번에transform:rotate를 사용하여 요소를 회전시키지만, 회전시킬 때의 기준점(축?)transform-origin으로 지정합니다.
transform-origin 속성은 요소가 2D 또는 3D 변형일 때 변형 원점을 지정하는 데 사용됩니다.
참조: HTML 빠른 참조transform-origin

이렇게 하면 transform-origin을 사용하여 회전할 때의 축을 지정합니다.
transform 이전의 -webkit-와 -ms-는 공급업체의 접두사입니다. 어느 브라우저든지 이 속성이 정상적으로 작동할 수 있음을 설명합니다.
참조: [CSS3] 공급업체 접두사는?(속성에 따라 필요 없음)
참조: [CSS3] 2015년 4월 3일 현재 자주 사용하는 CSS3 속성의 브라우저 대응 상황과 쓰기
참조: Can I use

z-index

z-idex는 요소의 중첩 순서를 지정할 수 있는 속성입니다.
이번에는 다른 요소보다 순서가 낮은 곳에 시뮬레이션 요소를 배치했다.
참조: CSS 재입문 제4회 z-idex 재입문 1

margin과width의 크기와 위치를 미세하게 조정합니다

margin은 마이너스,width는 120% 로 위조 요소의 설정 위치를 미세하게 조정합니다.그림으로 설명하면 이런 느낌이에요.

어때?
이 비스듬한 배경을 잘 활용하면 멋진 전단을 개발할 수 있을 것 같아요.
아날로그 요소의 배경에 이미지를 넣어도 트렌디한 느낌을 줄 수 있다.아래의 사이트는 이 수법을 이용하여 상당히 유행하게 사이트를 제작하여 참고로 삼고 있다.
EatWith

참고 자료

・css 초보자 이탈?:기본적 용법
・매우 편리한 CSS의 before/after 위조 요소
・CSS 기본position 속성 사용 방법
・CSS:position의 absolute relative fixed 참조
・HTML 빠른 참조 오버플로우
・HTML 빠른 참조transform
・[CSS3] 공급업체 접두사는?(속성에 따라 필요 없음)
・[CSS3] 2015년 4월 3일 현재 자주 사용하는 CSS3 속성의 브라우저 대응 상황과 쓰기
・Can I use
・CSS 재입문 제4회 z-idex 재입문 1