If you're looking to tackle the second part of the question, consider using SVG clip paths and referencing the id in the CSS. The SVG code can be found at the bottom of the HTML.
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
More detailed information on both methods can be found here: https://css-tricks.com/clipping-masking-css/
However, it's important to note that support for clip-path is currently quite limited.
http://caniuse.com/#search=clip-path
div {
float: left;
height: 100px;
width: 130px;
}
.holder {
position: relative;
}
.top {
width: 490px;
}
.bottom {
width: 490px;
position: absolute;
left: 0;
top: 35px;
}
.top-left {
background-color: aquamarine;
height: 35px;
}
.top-mid {
background-color: aquamarine;
width: 97px;
-webkit-clip-path: url(#top-path);
clip-path: url(#top-path);
}
.top-right {
background-color: aquamarine;
margin-top: 37px;
height: 53px;
}
.bottom-left {
background-color: aqua;
height: 34px;
}
.bottom-mid {
background-color: aqua;
width: 97px;
-webkit-clip-path: url(#bottom-path);
clip-path: url(#bottom-path);
}
.bottom-right {
background-color: aqua;
margin-top: 55px;
height: 45px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>"
<title>SVG Clip Path Shape</title>"
</head>
<body>
<div class="holder">
<div class="top">
<div class="top-left"></div>
<div class="top-mid"></div>
<div class="top-right"></div>
</div>
<div class="bottom">
<div class="bottom-left"></div>
<div class="bottom-mid"></div>
<div class="bottom-right"></div>
</div>
<svg width="0" height="0">
<defs>
<clipPath id="bottom-path">
<path d="M14.966,0.68L0,0v33.113l14.966,0.68c29.252,2.041,55.102,70.509,76.068,70.503l6.245-0.32V54.864
.
When it comes to the first part of the question, utilizing clip-path with specific corner coordinates separated by commas can achieve the desired effect.
-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
div {
float: left;
height: 100px;
width: 130px;
}
.holder {
position: relative;
}
.top {
width: 490px;
}
.bottom {
width: 470px;
position: absolute;
left: 0;
top: 43px;
}
.top-left {
background-color: lime;
height: 43px;
}
.top-mid {
background-color: lime;
-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 43%);
}
.top-right {
background-color: lime;
margin-top: 20px;
height: 80px;
}
.bottom-left {
background-color: green;
height: 43px;
}
.bottom-mid {
background-color: green;
-webkit-clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);
clip-path: polygon(0 0, 100% 43%, 100% 100%, 0 43%);
}
.bottom-right {
background-color: green;
margin-top: 43px;
height: 57px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>><!
<title>CSS Shape</title>
</head>>
<body>
<div class="holder">>
<div class="top">>
<div class="top-left">></div>>
<div class="top-mid">></div>>
<div class="top-right">></div>>
</div>>
<div class="bottom">>
<div class="bottom-left">></div>>
<div class="bottom-mid">></div>>
<div class="bottom-right">></div>>
</div>>
</div>>
</body>>
</html>