Wie zeichne ein "Snip Diagonale Ecke Rechteck" mit CSS?

Question

Ich möchte ein modales up mit Snip Diagonale Ecke Rechteckform bringen. Es war ein Rechteck mit Ecken, die in der unteren rechten Ecke und der oberen linken Ecke abgeschnitten waren. Diese Form ist Teil von Microsoft Office-Form.

Gibt es trotzdem das Modal mit dieser Form zu bekommen?

Update: Bild Fourth image from top

JS Skript modal zu öffnen:

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; 
} 

Ich möchte, dass die Grenze erscheinen, als das 4. Bild von der Spitze des verknüpften Bildes. Kann jemand helfen?

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; 
     }