CSS로 각진 모서리를 만들고 테두리를 유지하려면 어떻게 해야 합니까?

CSS를 사용하여 각진 모서리 만들기

많은 사람들이 CSS를 사용하여 복잡한 디자인을 얻으려고 노력하며 각진 모서리를 만드는 것도 그러한 노력 중 하나입니다. 회색 테두리를 동시에 유지하는 마스크를 사용하는 것과 유사하게 이러한 모양 내에서 이미지를 자르는 것이 가능한지 궁금할 수도 있습니다.

이 작업을 위해 캔버스나 SVG를 활용하는 것을 고려할 수 있습니다. 그러나 상위 컨테이너 내에서 :before 및 :after 요소를 사용하면 순수 CSS로 유사한 효과를 얻을 수 있습니다.

먼저 상위 컨테이너에 테두리를 할당합니다. 그런 다음 :before 요소를 추가하여 모서리를 차단하고 -1px만큼 오프셋하여 테두리를 덮습니다. 마지막으로 :before에서 약간 오프셋된 :after 요소를 도입하여 절단의 내부 선을 만듭니다.

이 방법에도 불구하고 45도 선의 두께를 유지하는 것은 약간의 과제로 남아 있습니다.

다음 CSS 및 HTML 코드를 고려하세요.

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

이 접근 방식은 원하는 각도 모서리에 가까워지는 동안 국경을 보존합니다.

위 내용은 CSS로 각진 모서리를 만들고 테두리를 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!