CSS로 가장자리를 만들거나 접을 수 있습니까?

Question

CSS로 이와 같은 폴드를 만들 수 있습니까? 무엇이라고 부르며 어떻게 만들어 집니까? 이전에 웹 사이트에서 본 적이 있지만 그 이름이 무엇인지 또는 어떻게 처리되었는지 그리고 검색을 시도했는지는 알지 못합니다.

감사합니다.

Answer 1

사용 의사 요소 및 테두리 :

ul { 
    width: 500px; 
    height: 300px; 
    background: lightblue; 
    margin: 50px auto; 
    position: relative; 
    padding: 50px 0; 
} 

li { 
    display: block; 
    width: 300px; 
    height: 100px; 
    background: salmon; 
    position: relative; 
    left: -20px; 
} 

li:before { 
    content: ""; 
    position: absolute; 
    top: -20px; 
    line-height: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-bottom: 20px solid red; 
    border-left: 20px solid transparent; 
} 

Demo