기본 이미지를 가리지 않고 Div의 반응형 경사 가장자리를 만드는 방법은 무엇입니까?

Div의 반응형 경사 가장자리 만들기

문제:

테두리를 사용하지 않고 div의 경사 가장자리 만들기 그러면 기본 이미지가 모호해집니다.

해결책:

기울어진 의사 요소:

비뚤어진 의사 요소를 활용하여 위의 텍스트 내용을 유지하면서 기울어진 배경.

변형 원점:

의사 요소의 변환 원점을 원하는 경사 기준점(오른쪽 하단)으로 설정합니다. 이 경우 모퉁이).

기울기 변환:

의사 요소에 기울기 변환을 적용하여 그에 따라 각도를 맞춥니다(예: -45도).

오버플로:

오버플로 사용: 숨김; 의사 요소에서 넘친 부분을 숨기려면

음수 Z-색인:

음수 Z-색인을 사용하여 div 콘텐츠 뒤에 의사 요소를 배치합니다.

예제 코드:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}

결과:

이 솔루션을 사용하면 반응성이 뛰어난 경사 가장자리를 만들 수 있습니다. 텍스트 내용에는 영향을 주지 않습니다.

위 내용은 기본 이미지를 가리지 않고 Div의 반응형 경사 가장자리를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!