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');
}
總結
以上是生活随笔為你收集整理的css3边框线倾斜,使用CSS3倾斜边框的Div?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小半计算机谱子,小半 _桃李醉春风个人制
- 下一篇: html伪类选择器代码,CSS3中结构性