width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red}
思路: div旋转45度 img旋转-45度html:<div class="lx"><img src="img/replace_me.jpg" alt=""></div>
css:
.lx{transform:rotate(45deg)width:400pxheight:400pxoverflow:hiddenvertical-align: middletext-align: centermargin:100px autodisplay:flex}
.lx img{transform:rotate(-45deg)max-width:100%max-height:100%}
用css3可以写成，但是不能兼容IE7,8,我这写了一种方法可以实现同时也可以兼容IE7,8<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<img src="7.jpg" />
</div>
.container {
width:400px
height:400px
border:1px solid #0094ff
position:relative
}
.container >div {
position:absolute
width:0
height:0
}
.div1 {
border-top:100px solid #0094ff
border-left:100px solid #0094ff
border-right:100px solid transparent
border-bottom:100px solid transparent
}
.div2 {
border-top:100px solid #0094ff
border-right:100px solid #0094ff
border-left:100px solid transparent
border-bottom:100px solid transparent
top:0
right:0
}
.div3 {
border-bottom:100px solid #0094ff
border-left:100px solid #0094ff
border-right:100px solid transparent
border-top:100px solid transparent
bottom:0
left:0
}
.div4 {
border-bottom:100px solid #0094ff
border-right:100px solid #0094ff
border-left:100px solid transparent
border-top:100px solid transparent
bottom:0
right:0
}
img {
width:400px
height:400px
}
