공부

css 접힌 모서리 만들기

꿈이의꿈 2023. 9. 24. 18:07
Document
  • 1. 접힌 모서리 효과
  • 2. 접힌 모서리 효과
  • 1. 접힌 모서리 효과
  • 2. 접힌 모서리 효과


  • 1. 접힌 모서리 효과
  • 2. 접힌 모서리 효과

    • 접힌 모서리 만들기

     

    <여기부터 코드 시작>

    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{padding:5%;}
    
    .postit {
    width:250px;
    height:50px;
	border: 1px solid #efefef;
	display: block;
	position: relative;
    margin-top:3%;
    }

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


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

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

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

    .postit.bottom.color {
    border:none;
        background:#efefef;
    }
    
    .postit.bottom.color:before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        border-bottom: 15px solid #fff;
        border-left: 15px solid rgba(0, 0, 0, 0);
        border-top:none;
        width: 0;
    }    
    </style>
</head>
<body>
    <li class="postit"><span class="bold">1.</span> 접힌 모서리 효과</li>
    <li class="postit"><span class="bold">2.</span> 접힌 모서리 효과</li> 


    <li class="postit bottom"><span class="bold">1.</span> 접힌 모서리 효과</li>
    <li class="postit bottom"><span class="bold">2.</span> 접힌 모서리 효과</li> 

    <br><br><hr>

    <li class="postit bottom color"><span class="bold">1.</span> 접힌 모서리 효과</li>
    <li class="postit bottom color"><span class="bold">2.</span> 접힌 모서리 효과</li> 
</body>
</html>

     

     

    참고 : 코딩하는 둥아, https://peachsoong.tistory.com/41