Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
body {
background-color: #eee;
overflow: hidden;
background-image: url("bg.jpg");
-webkit-background-size: cover;
background-size: cover; }
body div.belt1 {
box-sizing: border-box;
margin-left: -200%;
padding-top: 10px;
width: 500%;
height: 100px;
background-color: #3f171d;
box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.4);
-webkit-transform: translate(0, 0vh) rotateZ(15deg);
transform: translate(0, 0vh) rotateZ(15deg); }
body div.belt1:after {
content: "";
display: block;
height: 80px;
border-top: #eee 2px dashed;
border-bottom: #eee 2px dashed; }
body div.belt2 {
box-sizing: border-box;
margin-left: -200%;
padding-top: 10px;
width: 500%;
height: 100px;
background-color: #573121;
box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.4);
-webkit-transform: translate(0, -10vh) rotateZ(-15deg);
transform: translate(0, -10vh) rotateZ(-15deg); }
body div.belt2:after {
content: "";
display: block;
height: 80px;
border-top: #eee 2px dashed;
border-bottom: #eee 2px dashed; }
body div.belt3 {
box-sizing: border-box;
margin-left: -200%;
padding-top: 10px;
width: 500%;
height: 100px;
background-color: #774635;
box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.4);
-webkit-transform: translate(0, 50vh) rotateZ(25deg);
transform: translate(0, 50vh) rotateZ(25deg); }
body div.belt3:after {
content: "";
display: block;
height: 80px;
border-top: #eee 2px dashed;
border-bottom: #eee 2px dashed; }
body div.belt4 {
box-sizing: border-box;
margin-left: -200%;
padding-top: 10px;
width: 500%;
height: 100px;
background-color: #b20008;
box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, 0.4);
-webkit-transform: translate(0, 40vh) rotateZ(-10deg);
transform: translate(0, 40vh) rotateZ(-10deg); }
body div.belt4:after {
content: "";
display: block;
height: 80px;
border-top: #eee 2px dashed;
border-bottom: #eee 2px dashed; }
/*# sourceMappingURL=divLikeBelt.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment