SVG나 캔버스를 사용하지 않고 CSS에서 각진 모서리를 어떻게 만들 수 있나요?

CSS의 각진 모서리: 최첨단 기법

미적으로 만족스러운 웹사이트를 디자인하는 것은 어려울 수 있으며, 특히 각진 모서리를 만드는 경우에는 더욱 그렇습니다. 모서리. 그러나 CSS의 발전으로 이제 SVG나 캔버스와 같은 기본이 아닌 방법을 사용하지 않고도 이 효과를 얻을 수 있습니다.

각진 모서리 만들기

각진 모서리를 만들려면 부모 컨테이너와 함께 :before 및 :after 의사 요소를 활용할 수 있습니다. 이러한 요소의 위치, 테두리 스타일 및 오프셋을 조작하면 테두리를 유지하면서 모서리를 효과적으로 차단할 수 있습니다.

1단계: 컨테이너 테두리

시작 각진 모서리의 외부 경계를 정의하기 위해 컨테이너 요소에 테두리를 추가합니다.

2단계: :before 의사 요소

다음으로 :before 의사 요소를 추가하여 원하는 모서리를 잘라냅니다. 테두리를 덮기 위해 -1px의 음수 오프셋을 사용하여 절대적으로 위치를 지정합니다. 상단에 실선 테두리를 적용하고 오른쪽에 투명한 테두리를 적용하여 사선을 만듭니다.

3단계: :after Pseudo-Element

선을 작성하려면 컷오프 내부에 -2px의 약간 작은 오프셋을 사용하여 :after 의사 요소를 추가합니다. 상단에는 흰색 실선 테두리를, 오른쪽에는 투명한 테두리를 지정하세요.

구현 예

다음 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;
}

이 코드를 사용하면 컨테이너 내에서 이미지 요소를 래핑하여 지정된 각도의 이미지를 얻을 수 있습니다. 코너.

대체 접근 방식

CSS 기술이 솔루션을 제공할 수 있지만, 각진 모서리에 대한 정확한 제어가 필요하거나 마스킹 또는 이미지 클리핑과 같은 추가 기능이 필요한 경우, SVG나 캔버스를 사용하는 것이 더 적합한 접근 방식일 수 있습니다.

위 내용은 SVG나 캔버스를 사용하지 않고 CSS에서 각진 모서리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!