1

Create Different Shapes In CSS


Create Different Shapes in CSS
Here’s a good number of basic CSS shapes that can be added to cascading style sheets simply by using a bit of CSS3 coding. You can add circles, quares, triangles that point in different directions and have different angles, trapezoids, rectangles, and so much more. If you need help with the basics of CSS, try a beginner’s course. While this particular CSS course is not for CSS3, it will give you the basics that can easily be updated for CSS3.

The coding and an example symbol are listed below. You can change certain parts of the coding to make your shapes different sizes or different colors. Certain shapes have specific rules for how certain pieces have to be changed, and those specifications will be listed with the shape.

Lets start Create a simple Shapes
Square Shape:

#square {
     width: 120px;
     height: 120px;
     background: #0074BC;
}

Circle Shape:

#circle {
height:100px;
width:100px;
border-radius: 100px;
-moz-border-radius: 100px;/* FF3.6+ */
-webkit-border-radius: 100px;/* Chrome10+,Safari5.1+ */
-o-border-radius: 100px;/* Opera 11.10+ */
background:#FF7013;}

Parallelogram Shape:

#parallelogram {
     width: 100px;
     height: 100px;
     border: 1px solid #000;
     background: yellow;
     transform: skew(20deg);
     -o-transform: skew(20deg);
     -moz-transform: skew(20deg);
     -webkit-transform: skew(20deg);
}

Parallelogram Right:

#parallelogramRight {
     width: 100px;
     height: 100px;
     border: 1px solid #000;
     background: yellow;
     transform: skew(-20deg);
     -o-transform: skew(-20deg);
     -moz-transform: skew(-20deg);
     -webkit-transform: skew(-20deg);
}

Diamond Shape:

#diamond{
     width:100px;
     height:100px;
     border:1px solid #000;
     background:#FFFF00;
     margin:3px 0 0 30px;
     -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%;
}

Triangle Up:

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

Triangle Down:

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

Triangle Left:

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

Triangle Right:

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

Triangle Top Left:

#triangle-topleft {
     width: 0;
     height: 0;
     border-top: 100px solid #222832;
     border-right: 100px solid transparent;
}

Triangle Top Right:

#triangle-topright {
     width: 0;
     height: 0;
     border-top: 100px solid #222832;
     border-left: 100px solid transparent;

}

Triangle Bottom Left:

Triangle Bottom Left:
#triangle-bottomleft {
     width: 0;
     height: 0;
     border-bottom: 100px solid #222832;
     border-right: 100px solid transparent;
}

Triangle Bottom Right:

#triangle-bottomright {
     width: 0;
     height: 0;
     border-bottom: 100px solid #222832;
     border-left: 100px solid transparent;
}

Star Shape:

#star {
     margin: 50px 0;
     position: relative;
     display: block;
     width: 0px;
     height: 0px;
     border-right: 100px solid transparent;
     border-bottom: 70px solid #50A253;
     border-left: 100px solid transparent;
     -moz-transform: rotate(35deg);
     -webkit-transform: rotate(35deg);
     -ms-transform: rotate(35deg);
     -o-transform: rotate(35deg);
}
#star:before {
     border-bottom: 80px solid #50A253;
     border-left: 30px solid transparent;
     border-right: 30px solid transparent;
     position: absolute;
     height: 0;
     width: 0;
     top: -45px;
     left: -65px;
     display: block;
     content: '';
     -webkit-transform: rotate(-35deg);
     -moz-transform: rotate(-35deg);
     -ms-transform: rotate(-35deg);
     -o-transform: rotate(-35deg);
}
#star:after {
     position: absolute;
     display: block;
     top: 3px;
     left: -105px;
     width: 0px;
     height: 0px;
     border-right: 100px solid transparent;
     border-bottom: 70px solid #50A253;
     border-left: 100px solid transparent;
     -webkit-transform: rotate(-70deg);
     -moz-transform: rotate(-70deg);
     -ms-transform: rotate(-70deg);
     -o-transform: rotate(-70deg);
     content: '';
}

Egg Shape:

#egg {
   display:block;
   width:126px;
   height:180px;
   -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;  
   background: #D0D0D0;
}

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

1 comment :

  1. YourFriendAugust 10, 2014 at 10:40 AM

    Nice Post buddy. I was wondering how many people use these built-in CSS shapes in their websites?

    Won't it be easy and less headache if we simple import images. Instead of drawing them in CSS and giving all the specifications ?

    Thanks

    ReplyDelete