CSS의 각진 모서리: 상세한 솔루션
순수한 CSS를 사용하여 각진 모서리를 만드는 것은 가능하지만 특정 과제가 있습니다. 이를 달성하려면 테두리가 있는 상위 컨테이너 내에서 :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 class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" /> </div>
위 내용은 :before 및 :after 의사 요소만 사용하여 CSS에서 각진 모서리를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!