Question

我想带一个带有剪切对角线矩形的模态。这是一个矩形，右下角和左上角有切角。此形状是Microsoft office形状的一部分。

有没有得到这种形状的模态？

用于打开模态的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;
      }

如何用css绘制“Snip对角线矩形”？

1 个答案: