CSS만 사용하여 텍스트로 기울어진 Div를 만드는 방법은 무엇입니까?

Div에 기울어진 가장자리 만들기

경계선을 사용하지 않고 텍스트를 포함하는 기울어진 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;
}

설명:

• 비스듬한 의사 요소를 사용하여 기울어진 배경을 만듭니다. 텍스트가 변형의 영향을 받는 것을 방지합니다.
• 변형 원점 속성을 사용하면 의사 요소가 오른쪽 하단 모서리에서 기울어질 수 있습니다.
• Overflow:hidden; 의사 요소의 넘쳐나는 부분을 숨깁니다.
• 텍스트는 음수 Z-인덱스를 사용하여 배경 뒤에 쌓입니다.

사용 예:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!