CSS에서 테두리를 사용하지 않고 기울어진 Div를 만드는 방법은 무엇입니까?

테두리를 사용하지 않고 기울어진 div 만들기

문제:

다음과 같은 경우에는 테두리를 사용하여 기울어진 div를 만드는 것이 불가능합니다. div는 이미지 위에 배치됩니다. 반응형 CSS를 사용하여 기울어진 가장자리를 어떻게 만들 수 있나요?

해결책:

기울어진 의사 요소를 사용하여 기울어진 배경을 만들 수 있습니다. 이 접근 방식은 변환 작업의 영향을 받지 않고 텍스트를 유지합니다. 이를 달성하는 방법은 다음과 같습니다.

1. 의사 요소 위치 지정:
   절대 위치 지정을 사용하여 div에 :after 의사 요소를 추가합니다.
2. 편향 정의:
   -webkit-transform 사용: 스큐(-45deg); 속성(또는 공급업체 접두사)을 사용하여 의사 요소를 45도 기울입니다.
3. 변환 원점 설정:
   변환 원점 지정: 100% 0; 의사 요소가 오른쪽 하단 모서리에서 기울어지도록 허용합니다.
4. 오버플로 숨기기:
   오버플로 추가: 숨겨진; 넘친 부분을 숨기려면 의사 요소에 추가하세요.
5. 콘텐츠 뒤에 스택:
   의사 요소에 음수 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;
}

HTML:

<div>slanted div text</div>
<div>
  slanted div text<br />
  on several lines<br />
  an other line
</div>
<div>wider slanted div text with more text inside</div>

위 내용은 CSS에서 테두리를 사용하지 않고 기울어진 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!