CSS特殊边框
在粉红色区域可以添加想要的内容
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.parallelogram {
width: 200px;
height: 120px;
transform:skew(-30deg); /*设置倾斜度为-30*/
/* -webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform:skew(-30deg);
-ms-transform:skew(-30deg); */
background-color: red; margin: 50px auto;
}
body{
border: 1px solid black;
}
.b{
width: 101%;/*100%有缝隙*/
height: 300px;
background-color: pink;
position: relative;
}
.b .aa{
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 0 100vw 100px 0;
}
.b .bb{
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 0;
border-color: transparent transparent #f7d0d0;
border-style: solid;
border-width: 0 100vw 100px 0;
}
.c{
width: 101%;/*100%有缝隙*/
height: 300px;
background-color: #f7d0d0;
position: relative;
}
.c .bb{
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 0;
border-color: transparent transparent #fff;
border-style: solid;
border-width: 0 100vw 100px 0;
}
</style>
<body>
<div class="b">
<div class="aa"></div>
<div>第一块</div>
<div class="bb"></div>
</div>
<div class="c">
<div>第二块</div>
<div class="bb"></div>
</div>
<div class="parallelogram"></div>
</body>
</html>