CSS-将多个div切割，通过定位实现一个图案
通过CSS3中clip-path属性来实现个大象
同过clip-path对div进行裁剪时可以利用PS对原图片进行取色并获取一定的比例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大象</title>
<link rel="stylesheet" href="/elephant.css">
</head>
<body>
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
<div class="item8"></div>
<div class="item9"></div>
<div class="item10"></div>
<div class="item11"></div>
<div class="item12"></div>
<div class="item13"></div>
<div class="item14"></div>
<div class="item15"></div>
<div class="item16"></div>
<div class="item17"></div>
<div class="item18"></div>
</div>
</body>
</html>
大概的标一下item位置
elephant.css
body {
background-color: black;
}
.container {
position: absolute;
width: 900px;
height: 700px;
background-color:white;
left: 0;
right: 0;
margin: auto;
}
.container .item1 {
position: absolute;
bottom: 0;
right: 140px;
background-color:rgb(203, 210, 218);
width: 400px;
height: 350px;
clip-path: polygon(0 0,0 100%,100% 100%,40% 0);
}
.container .item2 {
position: absolute;
top: 193px;
right: 170px;
background-color:rgb(144, 166, 180);
width: 400px;
height: 700px;
clip-path: polygon(0 0,20% 65%,40% 60%,60% 0,30% 10%);
}
.container .item3 {
position: absolute;
top: 123px;
right: 170px;
background-color:rgb(113, 131, 143);
width: 400px;
height: 700px;
clip-path: polygon(0 10%,30% 20%,60% 10%,55% 0,5% 0);
}
.container .item4 {
position: absolute;
top: 19px;
right: 456px;
background-color:rgb(84, 101, 111);
width: 400px;
height: 700px;
clip-path: polygon(0 0,79.2% 50%,71.5% 25%);
}
.container .item5 {
position: absolute;
top: 19px;
right: -36px;
background-color:rgb(84, 101, 111);
width: 400px;
height: 700px;
clip-path: polygon(0 50%,79.2% 0,8.2% 25%);
}
.container .item6 {
position: absolute;
top: 19px;
right: -36px;
background-color:rgb(97, 172, 168);
width: 400px;
height: 700px;
clip-path: polygon(0 50%,50% 70%,79.2% 50%,79.2% 0);
}
.container .item7 {
position: absolute;
top: 19px;
right: 456px;
background-color:rgb(97, 172, 168);
width: 400px;
height: 700px;
clip-path: polygon(0 0,0 50%,29.2% 70%,79.2% 50%);
}
.container .item8 {
position: absolute;
bottom: 21px;
left: 310px;
background-color:rgb(113, 131, 143);
width: 100px;
height: 100px;
clip-path: polygon(0 0,30% 100%,100% 70%,88% 0);
}
.container .item9 {
position: absolute;
bottom: 86px;
left: 310px;
background-color:rgb(84, 101, 111);
width: 100px;
height: 100px;
clip-path: polygon(0 65%,40% 65%,70% 30%,20% 0);
}
.container .item10 {
position: absolute;
bottom: 284px;
left: 360px;
background-color:rgb(86, 100, 109);
width: 50px;
height: 50px;
clip-path: polygon(0 0,14.5% 70%,100% 0);
}
.container .item11 {
position: absolute;
bottom: 284px;
left: 487px;
background-color:rgb(86, 100, 109);
width: 50px;
height: 50px;
clip-path: polygon(0 0,85.5% 70%,100% 0);
}
.container .item12 {
position: absolute;
bottom: 250px;
left: 410px;
background-color:rgb(107, 129, 143);
width: 80px;
height: 3px;
}
.container .item13 {
position: absolute;
bottom: 225px;
left: 410px;
background-color:rgb(107, 129, 143);
width: 80px;
height: 3px;
}
.container .item14 {
position: absolute;
bottom: 200px;
left: 410px;
background-color:rgb(107, 129, 143);
width: 80px;
height: 3px;
}
.container .item15 {
position: absolute;
bottom: 175px;
left: 410px;
background-color:rgb(107, 129, 143);
width: 80px;
height: 3px;
}
.container .item16 {
position: absolute;
bottom: 150px;
left: 410px;
background-color:rgb(107, 129, 143);
width: 80px;
height: 3px;
}
.container .item17 {
position: absolute;
bottom: -3px;
left: 385px;
background-color:rgb(242, 240, 243);
width: 100px;
height: 200px;
clip-path: polygon(0 0,0 100%,17.5% 50%);
}
.container .item18 {
position: absolute;
bottom: -3px;
left: 492px;
background-color:rgb(242, 240, 243);
width: 100px;
height: 200px;
clip-path: polygon(0 50%,17.5% 100%,17.5% 0);
}
京公网安备 11010502036488号