简单地说有1种方法
1.用png图片(这样最简单)
用html+css写过之后这种效果只能用图片实现
这种效果有2种方法:
1.一种就是楼下的png图片;
2.通过CSS3的border属性(制作透明三角形;)
body{
background-color: #444;
}
.test{
width: 15px;
height: 30px;
box-sizing:border-box;
border-top: 15px solid #f5f5f5;
border-bottom: 15px solid #f5f5f5;
/*border-left: 20px solid #0f0;*/
border-right: 15px solid transparent;
/* border-top-right-radius: 4px;
border-radius: 12px;*/
}
.csspic{
width: 200px;
height: 400px;
margin:50px auto;
background: url(images/5.jpg) -15px top no-repeat;
-webkit-background-size: cover;
background-size: cover;
border-radius: 10px;
position: relative;
border: 15px solid #f5f5f5;
-moz-background-clip: border;
-webkit-background-clip: border-box;
-o-background-clip: border-box;
background-clip: border-box;
}
.img{
overflow: hidden;
width: 260px;
height: 400px;
}
.sjx{
position: absolute;
top:30px;
left: -15px;
background: url(images/5.jpg) left -30px no-repeat;
-webkit-background-size: 500px;
background-size: 500px;
z-index: 9999;
}
.csspic img{
height: 100%;
}