border-corner-shape을 사용하지 않고 CSS에서 블록 div의 경사진 모서리를 어떻게 만들 수 있나요?

CSS에서 블록 Div의 경사진 모서리 구현>

경사진 모서리가 있는 블록 div의 스타일을 지정하는 작업은 다양한 방법으로 접근할 수 있습니다. . CSS4 border-corner-shape는 여전히 옵션이지만 구현은 아직 보류 중입니다. 따라서 CSS3 변환을 사용하여 솔루션을 살펴보겠습니다.

CSS3 변환을 사용한 구현>

HTML 문서 내에서 원하는 클래스로 div 요소를 만듭니다. 블록 이름.

HTML:

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

로그인 후 복사

다음과 같이 CSS의 스타일을 정의합니다.

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);
}

로그인 후 복사

이 솔루션은 원래 테두리 속성을 그대로 유지하므로 추가 조정이 가능합니다. 실제 데모를 보려면 제공된 JSBin 데모를 참조하세요.

두 번째 Div

간단함을 위해 다음을 사용하여 비슷한 결과를 얻는 또 다른 CSS 구현을 고려해 보세요. CSS3가 없는 두 번째 div. 앞서 제공된 CSS 내의 box2 클래스를 참조하세요.

위 내용은 border-corner-shape을 사용하지 않고 CSS에서 블록 div의 경사진 모서리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!