CSS를 사용하여 "Snip 대각선 모서리 사각형"을 그리는 방법은 무엇입니까?

Question

나는 모퉁이 직사각형 모양을 가진 모달을 가져오고 싶다. 그것은 오른쪽 아래 모서리와 왼쪽 상단 구석에 잘린 모서리가있는 직사각형입니다. 이 모양은 Microsoft Office 모양의 일부입니다.

이 모양의 모달을 얻는 방법이 있습니까?

업데이트 : 이미지 Fourth image from top

JS 스크립트는 모달를 엽니 다 :

function clickhere(){ 
document.getElementById(‘modal’).style.display = “block”; 
} 

HTML :

<div class=“modal” id=“modal”> 
<div class=“modalborder”> 
..... 
</div> 
</div> 

CSS :

.modal{ 
display: none; 
position: fixed; 
z-index: 1; 
width: 100%; 
height: 100%; 
background-color: rgb(0,82,194); 
background-color: rgba(0,0,0,0.4); 
} 
.modalborder{ 
background-color: #e6ebef; 
margin: auto auto auto auto; 
width: 70%; 
height: 45%; 
border: 1px solid; 
} 

내가 테두리로 표시 할 그만큼 연결된 이미지의 위쪽에서 네 번째 이미지. 어떤 사람이 도움을 줄 수 있습니까?

Answer 1

<div class="shape"> </div> 


    .shape{ 
      background: #f00; 
      width: 300px; 
      padding: 110px; 
      margin: 200px; 
      position: relative; 
     } 
     .shape:before{ 
      content: ""; 
      top:0; 
      right: 100%; 
      position: absolute; 
      border-left: 100px solid red; 
      border-top: 50px solid transparent; 
      border-right: 0px solid red; 
      height: 0; 
      width: 100px; 
      padding: 85px; 
      transform: rotate(-180deg); 
      -webkit-transform: rotate(-180deg); 
      -moz-transform: rotate(-180deg); 
      -ms-transform: rotate(-180deg); 
      -o-transform: rotate(-180deg); 
     } 
     .shape:after{ 
      content: ""; 
      top: 0%; 
     left: 100%; 
      position: absolute; 
      border-left: 100px solid red; 
      border-top: 50px solid transparent; 
      border-right: 0px solid red; 
      height: 0; 
      width: 100px; 
      padding: 85px; 
     }