css - 如何用css画一个 “Snip diagonal corner rectangle”？

Question

我想调出一个带有剪断对 Angular 矩形形状的模态。它是一个在右下角和左上角被切 Angular 的矩形。此形状是 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;
}

我希望边框显示为链接图像顶部的第 4 个图像。有人可以帮忙吗？

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