CSS3 변환을 사용하여 블록 div에서 경사진 모서리를 어떻게 얻습니까?

CSS3을 사용하여 블록 Div의 모서리 베벨

블록 div에서 경사진 모서리를 얻는 것은 CSS4의 border-corner 이전에는 한때 어려운 일이었습니다. 모양 속성. 그러나 CSS3 변환을 사용하면 나중에 사용할 수 있도록 테두리 속성을 유지하면서 이 효과를 만들 수 있습니다.

비스듬한 모서리를 만들기 위해 HTML 구조와 CSS 스타일을 살펴보겠습니다.

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; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

CSS 코드에서는 경사진 모서리를 만들기 위해 의사 요소를 사용합니다. 이 의사 요소는 절대적으로 위치하며 기본 div 뒤에 유지되도록 음수 Z-색인을 갖습니다. 모퉁이를 회전하기 위해skew() 변환이 적용됩니다.

경사진 모퉁이의 환상을 만들기 위해 border-right 속성이 0으로 설정된다는 점에 유의하는 것이 중요합니다. 시각적으로 깔끔한 모서리를 보장하기 위해 의사 요소의 border-left 속성도 0으로 설정됩니다.

이 기술은 블록 div에 경사진 모서리를 효과적으로 추가하여 시각적으로 더욱 매력적인 디자인을 가능하게 합니다.

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