테두리 없이 Div의 기울어진 가장자리를 만드는 방법은 무엇입니까?

Div에 기울어진 가장자리 만들기: 새로운 접근 방식

테두리를 활용하지 않고 기울어진 div를 만들기 위해 응답성과 경사 효과로 인한 간섭 없이 텍스트를 포함할 수 있습니다.

기울어진 의사 요소 사용

기울어진 가장자리를 구현하는 열쇠는 기울어진 의사 요소를 활용하는 데 있습니다. 이 요소를 통합하여 배경색을 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;
}

설명

의사 요소는 div 내에 절대적으로 위치합니다. 변형 원본 속성은 요소의 오른쪽 하단 모서리에 설정되어 기울어짐 효과가 해당 지점에서 발생하도록 합니다. 실제 기울이기는 변형 속성을 통해 적용되며 요소를 시계 반대 방향으로 45도 회전합니다. 의사 요소에 음수 Z-인덱스를 부여하여 div 콘텐츠 뒤에 배치하여 넘치는 부분을 효과적으로 숨깁니다.

이 접근 방식을 사용하면 기울어진 가장자리 효과를 손상시키지 않고 div 내에 텍스트를 추가할 수 있습니다.

예

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