:before 및 :after 의사 요소만 사용하여 CSS에서 각진 모서리를 어떻게 만들 수 있나요?

CSS의 각진 모서리: 상세한 솔루션

순수한 CSS를 사용하여 각진 모서리를 만드는 것은 가능하지만 특정 과제가 있습니다. 이를 달성하려면 테두리가 있는 상위 컨테이너 내에서 :before 및 :after 요소를 활용해야 합니다.

1. 컨테이너에 테두리 추가: 테두리 주위에 테두리를 설정합니다. 눈에 보이는 경계를 정의하는 컨테이너 요소.
2. 코너를 차단하기 위한 :before 요소 생성: :before 추가 테두리 상단 스타일이 픽셀 단위로 지정된 요소를 사용하여 실선 수직선을 만듭니다. 컨테이너의 테두리를 고려하여 이 요소를 -1픽셀 오프셋합니다.
3. 내부 선을 생성하려면 :after 요소를 추가하세요. 다음보다 약간 더 작은 오프셋을 가진 :after 요소를 도입하세요. :before 요소. :after 요소의 테두리 상단 스타일을 흰색과 같은 다른 색상으로 설정하여 잘린 영역 내에 대비되는 선을 만듭니다.

이 기술은 원하는 효과에 근접하지만 45도 선의 굵기로 인해 약간의 문제가 발생할 수 있습니다.

예시 코드:

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

<div class="cutCorner">
    <img  src="/static/imghwm/default1.png" data-src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" class="lazy" alt=":before 및 :after 의사 요소만 사용하여 CSS에서 각진 모서리를 어떻게 만들 수 있나요?" >
</div>

위 내용은 :before 및 :after 의사 요소만 사용하여 CSS에서 각진 모서리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!