css3边框线倾斜,使用CSS3倾斜边框的Div？

我已经从我身边试图可能这是帮助你。

HTML

CSS

.container{

width:600px;

height:400px;

border:1px solid red;

overflow:hidden;

white-space:nowrap;

}

.imageWrap{

width:300px;

display:inline-block;

height:500px;

position:relative;

width:400px;

vertical-align:top;

margin-left:-70px;

}

.imageWrap.ro{

border-right:5px solid red;

-webkit-transform:rotate(15deg);

-moz-transform:rotate(15deg);

transform:rotate(15deg);

overflow:hidden;

z-index:1;

margin-left:-100px;

margin-top:-80px;

}

.pic{

background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg');

-webkit-transform:rotate(-15deg);

-moz-transform:rotate(-15deg);

transform:rotate(-15deg);

width:640px;

height:640px;

position:absolute;

left:-50px;

}

.pic2{

width:400px;

height:400px;

background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg');

}