css 地址框做出类型信封效果

直接上代码

<div class="letter-box">
    <div class="letter-border">
         <div class="consignee ">
             <div>收货人：李思思</div>
             <div>手机号：123456789</div>
              <div>收货地址：广东省深圳市南山区科技园12路</div>
         </div>
     </div>
 </div>

css 样式

.letter-box{
        width: 100%;
        height: 176px;
        padding: 3px;
        box-sizing: border-box;
    }
    .letter-border{
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }

.letter-box{
        width: 100%;
        height: 176px;
        padding: 3px;
        box-sizing: border-box;
        background: linear-gradient(45deg,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%,#f25953 50%,#f25953 62.5%,#fbfaf5 62.5%,#fbfaf5 75%,#5590d6 75%,#5590d6 87.5%,#fbfaf5 87.5%,#fbfaf5 100%);
        background-size: 70px 70px;
    }

   .consignee {
     padding: 15px;
}