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

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;

  }