css - 한 쪽 모서리가 접힌 모양 만들기

css로 포스트잇 모양처럼 한 쪽 모서리가 접힌 모양을 만드는 방법입니다.

hover 했을 때

각 네모가 postit class를 가진 div 입니다.

postit class에 before 효과를 줘서 모서리가 잘린 효과를 주었습니다.

before에 border-top color를 white나 투명한 색으로 바꿔주면 모서리가 잘린 느낌을 줄 수 있습니다.

•  꼭 postit에 position: relative 속성을 추가해야지 before effect가 postit class에 적용 된다는 점 참고해주세요!
• hover effect는 .posit:hover:before 라고 해야 적용됩니다!

<li class="postit"><span class="bold">1.</span> 백준 2097번</li>
<li class="postit"><span class="bold">2.</span> 백준 10020번</li>

.postit {
	border: 1px solid #0000004d;
	display: block;
	position: relative;
	cursor: pointer;
}

.postit:hover:before {
	border-top: 15px solid #677e52;
}

.postit:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	border-top: 15px solid #7373734f;
	border-left: 15px solid rgba(0, 0, 0, 0);
	width: 0;
}