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

블록 Div의 경사진 모서리 스타일 지정

제공된 HTML 문서에는 실선 테두리가 있는 표준 블록 div가 정의되어 있습니다. 목표는 div 오른쪽에 경사진 모서리 효과를 만드는 것입니다.

CSS3를 사용하여 이 효과를 얻으려면 border-corner-shape 속성이 이상적인 솔루션이 될 것입니다. 그러나 아직 모든 브라우저에서 완벽하게 지원되는 것은 아닙니다. 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>

이 접근 방식에는 .box의 이후 요소로 추가 div를 추가하는 작업이 포함됩니다. 이 div는 경사 효과를 만들기 위해 기울어진 변형을 사용하여 .box 요소 위에 절대적으로 위치합니다.

자세한 설명은 답변에 제공된 JSBin 데모를 참조하세요. 이 예에는 CSS3 선언이 없는 대체 구현을 보여주는 또 다른 div 클래스(box2)도 포함되어 있습니다.

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