문제:
다음과 같은 경우에는 테두리를 사용하여 기울어진 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; }
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!