순수 CSS를 사용하여 테두리가 보존된 각진 모서리를 어떻게 만들 수 있나요?

CSS 각진 모서리: 심층 분석

순수한 CSS를 사용하여 각진 모서리를 만드는 것은 어려운 작업이 될 수 있습니다. 특히 국경. 그러나 :before 및 :after 요소를 주의 깊게 조작하면 가까운 근사값을 얻을 수 있습니다.

1단계: 테두리가 있는 컨테이너

원하는 각진 모양을 유지하는 컨테이너에 테두리를 추가합니다.

2단계: :before for Corner 정전

다음으로 :before 요소를 생성하여 특정 모서리를 차단합니다. 테두리를 덮도록 하려면 -1px로 오프셋합니다.

3단계: 내부 선의 경우:after

잘린 모서리 내의 각진 선의 경우, :after 요소를 소개합니다. :before 요소에서 이를 약간 오프셋합니다.

예제 코드:

.cutCorner {
  position: relative;
  background-color: blue;
  border: 1px solid silver;
  display: inline-block;
}
.cutCorner img {
  display: block;
}
.cutCorner:before {
  position: absolute;
  left: -1px;
  top: -1px;
  content: '';
  border-top: 70px solid silver;
  border-right: 70px solid transparent;
}
.cutCorner:after {
  position: absolute;
  left: -2px;
  top: -2px;
  content: '';
  border-top: 70px solid white;
  border-right: 70px solid transparent;
}

솔루션에서 언급한 대로 45도 선의 두께를 유지하는 것은 문제. 그러나 이 접근 방식은 테두리가 있는 각진 모서리를 만드는 데 실행 가능한 솔루션을 제공합니다.

위 내용은 순수 CSS를 사용하여 테두리가 보존된 각진 모서리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!