用CSS3如何把如图中的红色三角形的背景图做成一体
发布网友
发布时间：2022-04-06 11:33
共2个回答
热心网友
时间：2022-04-06 13:02
1.用png图片（这样最简单）
用html+css写过之后这种效果只能用图片实现追问把图片做一个那样的边框如何做呢？用CSS
追答
做一个你的第二张图片内样的效果，图片部分是透明的，然后设置这个图片
background：url（这里设置你要放的图片） no-repeat center；background-size:120%;(这个大小你自己设置，也可以不设置，视情况)
热心网友
时间：2022-04-06 14:20
这种效果有2种方法：
1.一种就是楼下的png图片；
2.通过CSS3的border属性（制作透明三角形;）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
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%;
}
</style>
</head>
<body>
<div class="csspic">
<div class="sjx">
<div class="test"></div>
</div>
<div class="img"><!-- <img src="images/5.jpg"> --></div>
</div>
</body>
</html>
