기울어진 의사 요소를 사용하여 Div에서 기울어진 가장자리를 얻는 방법은 무엇입니까?

Div에 경사진 가장자리 만들기

소개

CSS를 사용하여 div에 경사진 가장자리를 만드는 것은 어려울 수 있습니다. 특히 반응형 솔루션. 이 주제는 이전에 논의되었지만 대체 접근 방식을 살펴보겠습니다.

기울어진 의사 요소 사용

기울어진 배경을 만들기 위해 기울어진 의사 요소를 사용할 수 있습니다. 이를 통해 변환 속성의 영향을 받지 않고 텍스트를 유지할 수 있습니다.

변환 원점 속성은 오른쪽 하단 모서리에서 의사 요소의 기울어짐 위치를 지정하는 반면,overflow:hidden; 넘치는 부분을 숨깁니다. 마지막으로 음수 Z-색인은 div 콘텐츠 뒤에 의사 요소를 배치합니다.

CSS 구현

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>

위 내용은 기울어진 의사 요소를 사용하여 Div에서 기울어진 가장자리를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!