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

CSS3 변환을 사용하여 Div 요소에 경사진 모서리를 만드는 방법

문제:

다음이 포함된 HTML 문서를 고려해보세요. 직선 테두리가 있는 div 요소입니다. 아래 이미지와 같이 경사진 모서리를 얻기 위해 스타일을 어떻게 수정할 수 있습니까?

[경사진 모서리가 있는 div 요소 이미지]

답변:

CSS4 속성 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>

이 기술에는 경사 효과를 얻기 위해 변형된 기울이기와 절대 위치 지정을 사용하여 삼각형 모양의 div 요소를 만드는 작업이 포함됩니다. "box2" 클래스가 있는 추가 div 요소도 HTML 및 CSS에 포함되어 있으며 이는 CSS3 선언을 사용하지 않는 대체 접근 방식을 보여줍니다.

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