CSS3 변환을 사용하여 블록 Div에서 경사진 모서리를 얻는 방법은 무엇입니까?

블록 Div 모서리 베벨

도전

"block1" 클래스의 블록 div가 포함된 HTML 문서에서 목표는 제공된 이미지에 설명된 대로 div의 오른쪽에 경사진 모서리를 만드는 것입니다.

해결책

향후 CSS4 테두리 모서리 모양을 활용하지 않고 이 효과를 얻으려면 속성을 사용하여 위치 기반 기술과 함께 CSS3 변환을 사용합니다.

구현

HTML:

<code class="html"><div class="box">
  Text Content
</div></code>

CSS:

<code class="css">.box {
  width: 200px;
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

설명

이 구현에는 다음 기술이 포함됩니다.

• CSS3 변환: 기울이기 변환 속성은 다음에 적용됩니다. 추가된 div를 45도 회전합니다.
• 절대 위치 지정: 추가된 div는 경사진 모서리를 생성하기 위해 상단 및 오른쪽 속성을 사용하여 절대 위치를 지정합니다.
• 음수 Z-인덱스: 추가된 div에는 음수 Z-인덱스가 부여되어 원본 div 뒤에 가져옵니다.
• 테두리 조작: 원본 div의 테두리 오른쪽이 0으로 설정됩니다. 경사진 가장자리에 두 번째 테두리가 생기는 것을 방지합니다.
• 패딩 수정: 제거된 1px 테두리를 보상하기 위해 원본 div의 패딩 오른쪽이 1px 증가합니다.

위 내용은 CSS3 변환을 사용하여 블록 Div에서 경사진 모서리를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!