向这样的虚线梯形框有什么逻辑么？

Question

向这样的虚线梯形框有什么逻辑么？我是准备拿两个div去拼接的

Answer 1

  .box{    position: relative;    width: 150px;    height: 100px;    border: 1px dashed grey;  }  .box::before{    content:'';    position: absolute;    width: 50px;    height: 30px;    background: #fff;    right: -1px;    top: -1px;  }  .box::after{    content:'';    position: absolute;    width: 57px;    border-bottom: 1px dashed grey;    transform: rotate(32deg);    right:-5px;    top: 14px;  }