How to create custom shapes with pseudo classes in CSS3 - css

Question

I am trying to create an element using Bootstrap that looks like this image
This is the screen shot of how far I have gone
I have never worked on pseudo classes and am finding it very difficult to get the exact shape. Please take a look at my code and help me figure it out. I have included only the second (thee one on the right side in the screenshot) clipboard's code here.
HTML
<div class="col-xs-12 col-sm-6">
<div class="clip">
<div class="circle"></div>
</div>
<div class="pad">
<div class="paper"></div>
</div>
</div>
CSS
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before{
top: 12.5px;
left: 15%;
width: 70%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after{
top: 60px;
left: 15%;
width: 70%;
border-bottom: solid 55px grey;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.circle:before{
top: 10px;
left: 70%;
width: 20%;
height: 50px;
border-radius: 50%;
border-right: solid 150px yellow;
}

Answer 1

because there is no SVG tag, i'll go with pseudo & gradient :
div {
position:relative;
float:left;
margin:60px 60px 80px;
width:180px;
height:200px;
border-radius:15px;
background:white;
box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px;
}
div:before {/*to draw outside part of border with same radius inside/out */
z-index:-1;
border-radius:20px;
content:'';
border: 20px solid #159E91;
position:absolute;
top:-30px;
left:-30px;
right:-30px;
bottom:-30px;
box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white, 0 5px 5px -3px rgba(0,0,0,0.5)
}
div:after {/* draw gradient underneath clipper */
content:'';
position:absolute;
top:0;
border-radius: 0 15px 0 0;
left:26px;
width:152px;
height:150px;
background:
linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40% ),/* mask*/
linear-gradient(-45deg, white , transparent 70%),/* mask*/
linear-gradient(to right , rgba(0,0,0,0.25) , rgba(0,0,0,0.15)),transparent ;
}
.clipper {/* hold clipper shape actually */
display:block;
width:128px;
height:80px;
margin: -52px auto 30px;
position:relative;
z-index:1;
overflow:hidden;
}
.clipper b {/* show the clipper shape */
border-radius:35px;
position:absolute;
height:150%;
width:100%;
box-shadow: 0 0 1px 1px gray;
left:50%;
top:-12px;
transform-origin:0 0;
transform:rotate(45deg);
overflow:hidden;
}
.clipper b:before {/* draw the hoe and paint around it */
content:'';
display:block;
border-radius:100%;
height:29px;
width:29px;
margin:20px;
box-shadow:inset -1px -1px 1px gray, 0 0 0 100px #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5);
}
/* to match fake picture's text */
.clipper ~ span {
display:block;
background:#353535;
margin:10px 58px;
padding:5px;
position:relative;
z-index:1;
}
.clipper ~ span:last-of-type {
display:block;
background:#353535;
margin:10px 85px 10px 58px;
}
<div>
<span class="clipper"><b></b></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
but that's really much CSS for just a shape, where an image or an SVG would do fine for the design.
You can play with it here : http://codepen.io/gc-nomade/pen/rLYYZx

Answer 2

https://jsfiddle.net/ahe128/esmrLzuv/5/
i did something but this is realy hard work i will try complete this :)
.clip,
.circle {
position: relative;
}
.clip::after,
.clip::before,
circle:after,
.circle:before {
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before {
top: 1rem;
left: 10%;
width: 20%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after {
top: 4.65rem;
left: 10%;
right:10%;
width: 82%;
border-bottom: solid 4.3rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
}
.circle:before {
top: 0.78rem;
height: 1px;
width:1px;
border-radius: 50%;
border: solid 25px white;
z-index:100;
left:47%
}

Answer 3

Finally.......I got it working (except the diagonal gradient). But it's not responsive yet. My aim is to keep each Clipboard's design intact and stack them one below the other in small screens. Can someone please point out where I'm missing it !!
Also, if there's a better way of doing it in Pure CSS then I'd love to see it.
Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/7/
/*Clip*/
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
}
.clip:before{
z-index: 50;
top: 1rem;
left: 6.958rem;
width: 29rem;
border-bottom: solid 4rem grey;
border-left: solid 11.5rem transparent;
border-right: solid 11.5rem transparent;
}
.clip:after{
top: 4.7rem;
left: 6.958rem;
width: 29rem;
z-index: 50;
border-bottom: solid 4rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.circle{
position: absolute;
z-index: 60;
top: 0.4rem;
left: 15.6rem;
width: 12rem;
height: 8rem;
background: grey;
border-radius: 50%;
}
.circle::before{
z-index: 60;
top: 1rem;
left: 4.2rem;
width: 3.5rem;
height: 3.5rem;
background: white;
border-radius: 50%;
}
/*End of Clip*/