我已經從我身邊試圖可能這是幫助你。

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');

}

總結

以上是生活随笔為你收集整理的css3边框线倾斜,使用CSS3倾斜边框的Div？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。