Thursday 9 January 2014

CSS3 Shapes

#circle { 
   width: 140px;
   height: 140px;
   background: red; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

#square {
   width: 140px; 
   height: 140px; 
   background: blue; 
}
#oval {
   width: 200px; 
   height: 100px; 
   background: purple; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}


#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}


#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 80px solid pink;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

 
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid orange;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}


#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid red;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}


#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}


#diamond {
   width: 80px; 
   height: 80px; 
   background: purple;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}


#rectangle {
   width: 140px; 
   height: 80px;
   background: green;
}


#parallelogram {
   width: 130px; 
   height: 75px;
   background: pink;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}


#twelve-point-star {
   height: 100px;
   width: 100px;
   background: orange;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: orange;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}


#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid red;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid red;
   margin: 30px 0 0 -50px;
}


#octagon {
   width: 100px; 
   height: 100px; 
   background: blue;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid blue;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid blue; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}


#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: purple;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid purple;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}


#egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:green;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}


#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid navy;
  /* 104 = 120 * 0.866 */
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}


.pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}


.biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid yellow;
  border-right: 60px solid yellow;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}

#heart { 
 position: relative;
}
#heart:before, #heart:after {
 position: absolute;
  content: "";
 left: 70px; top: 0;
 width: 70px;
 height: 115px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
#heart:after { 
 left: 0; 
 -webkit-transform: rotate(45deg); 
 -moz-transform: rotate(45deg); 
 -ms-transform: rotate(45deg); 
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}









1 comment:

  1. شركة شحن عفش من الدمام لمصر شركة شحن عفش من الدمام لمصر
    ارخص شركة نقل عفش بالمدينة المنورة ارخص شركة نقل عفش بالمدينة المنورة
    اسعار شركات نقل العفش بالدمام اسعار شركات نقل العفش بالدمام
    شركة شراء اثاث مستعمل بالدمام شركة شراء اثاث مستعمل بالدمام
    شركة شراء اثاث مستعمل بالاحساء شركة شراء اثاث مستعمل بالاحساء
    شركة شحن عفش من المدينة لمصر شركة شحن عفش من المدينة لمصر
    ارخص شركة نقل عفش بمكة ارخص شركة نقل عفش بمكة

    ReplyDelete