Search code examples
csscss-shapespseudo-class

How to create custom shapes with pseudo classes in CSS3

I am trying to create an element using Bootstrap that looks like this image enter image description here

This is the screen shot of how far I have gone

enter image description here

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; 
}
Solution

  • 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