Pure CSS Shapes

Sunday 14th, Oct, 2018 | #Pure CSS #UI


CSS3 is great, check how you can create variated geometric shapes, with only CSS code. The most powerfull is by after and before selectors.

 #square { width: 100px; height: 100px; background: black; }
  #rectangle { width: 200px; height: 100px; background: black; }
  #parallelogram { width: 130px; height: 75px; background: black;  -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg);}
  #rectangle { width: 200px; height: 100px; background: black; }
  #trapezoid { border-bottom: 100px solid black; border-left: 25px solid transparent; border-right: 25px solid transparent; height: 0; width: 100px; }
   #star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid black; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid black; position: absolute; content: ""; top: 30px; left: -50px; }
   #star-five { margin: 25px 0; position: relative; display: block; color: black; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 35px solid black; border-left: 50px solid transparent; transform: rotate(35deg); } #star-five:before { border-bottom: 40px solid black; border-left: 15px solid transparent; border-right: 15px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: black; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid black; border-left: 100px solid transparent; transform: rotate(-70deg); content: ''; }
   #pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid black;
  border-left: 60px solid black;
  border-bottom: 60px solid black;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}