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;
    /*width: 200px;
    height: 200px;*/
    z-index: 1;
    color: #fff;
    margin-left:35%; margin-top: 35px;
}

.triple_border { 
    position: absolute;
    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 {
    content: "";
    width: 30px;
    height: 64px;
    display: block;
    position: absolute; 
    z-index: -1;
    top:1px;
    right:-3px;
    background: #fff; 
    border: 1px solid #cbcbcb; 
    border-radius: 3px;
}

.triple_border:before {
    content: "";
    width: 30px;
    height: 60px;
    display: block;
    position: absolute; 
    z-index: -1;
    top:3px;
    right:-5px;
    background: #fff; 
    border: 1px solid #cbcbcb; 
    border-radius: 3px;
}