CSS는 눈에 보이는 테두리를 유지하면서 각진 모서리를 만들고 이미지를 자를 수 있습니까?

CSS 각진 모서리 생성 및 이미지 클리핑

CSS를 활용하여 45도 각진 모서리를 수반하는 특정 모양을 만들 수 있습니까? 또한 요구 사항에는 회색 테두리가 계속 보이는 마스크를 사용하는 것과 유사하게 모양 내에서 이미지를 자르는 것이 포함됩니다.

CSS 내에서 이 작업의 타당성을 엄격하게 살펴보면 테두리를 유지하는 것이 어려운 일이라는 것이 분명해졌습니다. 그럼에도 불구하고 :before 및 :after 의사 요소를 상위 컨테이너와 함께 활용하는 솔루션이 고안되었습니다. :before 및 :after는 img 태그에 직접 적용할 수 없으므로 다음 접근 방식이 채택됩니다.

1. 컨테이너 요소에 대한 테두리를 설정합니다.
2. :before 요소를 생성하여 모서리를 가리고 -1px만큼 위치를 오프셋하여 테두리를 숨깁니다.
3. 선을 생성하려면 :before 요소에서 약간 오프셋된 :after 요소를 추가하세요.

이 접근 방식은 원하는 효과에 근접하지만 45도 각도의 선의 두께에 문제가 있습니다. CSS 코드 조각은 다음과 같습니다.

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

HTML 예는 다음과 같습니다.

<div class="cutCorner">
  <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

위 내용은 CSS는 눈에 보이는 테두리를 유지하면서 각진 모서리를 만들고 이미지를 자를 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!