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

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

Susan Sarandon
Susan Sarandon원래의
2024-11-11 08:08:03203검색

How to Create a Slanted Div Without Using Borders in CSS?

테두리를 사용하지 않고 기울어진 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.