Triple Photo Frame

Тройная рамка для фотографии

by LuckyCat

HTML

<div class="b-photo">
    <div class="triple_border">
        <img src="http://web.kuprina.dev.easydate.biz/aondenamoro.com/i/mobile_web_app/photo_1.jpg" width="51" height="64" alt="" />
     </div>
</div>

CSS

.b-photo { 
    position: relative;
    z-index: 999;
    color: #fff;
    margin-left:35px; margin-top: 35px;
    float: left;
}

.triple_border { 
    position: absolute;
    z-index: 9999;
    background: #fff; 
    border: 1px solid #cbcbcb; 
    border-radius: 3px;
    
    width: 57px;
    height:70px;
    
    padding-top: 2px; padding-left: 2px;
    
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


.triple_border:after, .triple_border:before {
    content: "";
    width: 1px;    
    display: block;
    position: absolute;     
    background: #fff; 
    border: 1px solid #cbcbcb; border-left: none;
    border-radius: 3px; border-top-left-radius: 0; border-bottom-left-radius:0;
}
.triple_border:after {
    height: 64px;    
    z-index: 2;
    top:1px;
    right:-3px;
}
.triple_border:before {
    height: 60px;
    z-index: 1;
    top:3px;
    right:-5px;
}