Cross Sheet
Cross Sheet :-
Some Time You just need to Create Some Drawing Sheets/ Paper Sheets. Don't Worry we are here to help you !
the above image shows the one of the example of sheets name is Cross sheet
If you just Read out whole code. please!! try to Write complete code , dont't copy Paste ...!!!
<div class="box">
<div class="blk-right"></div>
<div class="first" id="pink"></div>
<div class="second" id="yellow">
<div class="yello-sh"></div>
</div>
<div class="third" id="green">
<div class="green-sh"></div>
</div>
<div class="fourth" id="blue"></div>
</div>
/* color code */
#pink {
background: #F9A1C7;
}
#yellow {
background: #FDC202;
}
#green {
background: #5DE88D;
}
#blue {
background: #08A8FE;
}
.box {
position: relative;
display:block;
margin: auto;
margin-top: 8%;
width: 600px;
height: 500px;
border: 2px solid white;
background: #000;
}
.blk-right {
position: absolute;
width: 30%;
height: 100%;
background: black;
right: 0%;
}
.first {
position: absolute;
width: 30%;
height: 40%;
right: 33%;
z-index: 2;
transform: rotate(30deg);
-webkit-clip-path: polygon(39% 0, 96% 3%, 100% 100%, 0% 100%);
clip-path: polygon(39% 0, 96% 3%, 100% 100%, 0% 100%);}
.second {
position: absolute;
width: 28%;
height: 28%;
left: 32.4%;
top: 25.5%;
transform: rotate(-9deg);}
/* shadow on yellow */
.yello-sh {
position: absolute;
height: 100%;
width: 30%;
left: 14%;
top: 1%;
background: rgba(173, 173, 173, 0.17);
transform: rotate(-51deg);
-webkit-clip-path: polygon(100% 100%, 100% 0, 45% 100%);
clip-path: polygon(100% 100%, 100% 0, 45% 100%);}
.third {
position: absolute;
width: 35%;
height: 33%;
left: 20%;
top: 57%;
transform: rotate(10deg);
}
/*shadow on green*/
.green-sh {
position: absolute;
width: 30%;
height: 79%;
top: 42%;
right: 33%;
background: rgba(173, 173, 173, 0.30);
transform: rotate(-24deg);
-webkit-clip-path: polygon(100% 100%, 100% 0, 45% 0);
clip-path: polygon(100% 100%, 100% 0, 45% 0);
}
.fourth {
position: absolute;
width: 30%;
height: 37%;
top: 58.5%;
left: 25.5%;
transform: rotate(7deg);
-webkit-clip-path: polygon(100% 0, 38% 21%, 67% 100%, 100% 94%);
clip-path: polygon(100% 0, 38% 21%, 67% 100%, 100% 94%);}
/* for the Responsive screen Size */
@media screen and (max-width:600px) {
.box {
width: 449px;
height: 400px;
}
.second {
left: 32.1%;
top: 25.9%;
}
.yello-sh {
width: 30%;
left: 16%;
top: 1%;
}
}
@media screen and (max-width:449px) {
.box {
width: 250px;
height: 230px;
}
.second {
top: 26%;
left: 32.1%
}
.yello-sh {
left: 18.3%;
}
.green-sh {
top: 42%;
right: 30%;
transform: rotate(-21deg);
}
.fourth {
left: 26.5%;
}
}
This is Only for the learning Purpose. the above Complete code is written and tested. if you have any query about it. so you can contact Us.
all © rights reserved :2018