HTML Shapes: Simple CSS Shapes to Create

It gets really annoying when urgently we need a simple geometric shape to be designed by just CSS and simple HTML. Here comes a little TUT you can bookmark for such uncommon situations. You just create an HTML division and give it respective id as used in the CSS below for various geometric shapes. Well, as a secret ingredient for you I would recommend you to include the corresponding CSS too.

SQUARE:

ankit-mathur-blog-simple-html-shapes-square

#square{
width: 100px;
height: 100px;
background: #08c;
}

Inverse Parallelogram

ankit-mathur-blog-simple-html-shapes-inverse-paralleogram

#invParallelogram{
width:100px;
height: 70px;
background: #08c;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

Paralleogram

ankit-mathur-blog-simple-html-shapes-paralleogram

#parallelogram{
width: 100px;
height: 70px;
background: #08c;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
}

Diamond

ankit-mathur-blog-simple-html-shapes-diamond

#diamond{
width: 80px;
height: 80px;
background: #08c;
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%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

Trapezium

ankit-mathur-blog-simple-html-shapes-trapezium

#trapezium{
height: 0;
width: 100px;
border-bottom: 100px solid #08c;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

Face Left Trapezium

ankit-mathur-blog-simple-html-shapes-trapezium-left

#faceLeftTrapezium{
height: 100px;
width: 0;
border-right: 100px solid #08c;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

Face Right Trapezium

ankit-mathur-blog-simple-html-shapes-trapezium-right

#faceRytTrapezium{
height: 100px;
width: 0;
border-left: 100px solid #08c;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
}

Triangle

ankit-mathur-blog-simple-html-shapes-triangle

#triangleUp{
width: 0;
height: 0;
border-bottom: 100px solid #08c;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

Triangle Facing Right

ankit-mathur-blog-simple-html-shapes-triangle-right

#triangleFaceRight{
width: 0;
height: 0;
border-left: 100px solid #08c;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}

Triangle facing Down

ankit-mathur-blog-simple-html-shapes-triangle-down

#triangleFacingDown{
width: 0;
height: 0;
border-top: 100px solid #08c;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

Triangle facing Left

ankit-mathur-blog-simple-html-shapes-triangle-left

#triangleFacingLeft{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 100px solid #08c;
}

Semi Circle

ankit-mathur-blog-simple-html-shapes-semi-circle

#semiCircle{
background: #08c;
height: 45px;
width: 90px;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
border-radius: 90px 90px 0 0;
}

Semi Circle Facing Right

ankit-mathur-blog-simple-html-shapes-semi-circle-right

#semiCircleFacingRight{
background: #08c;
height: 90px;
width: 45px;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
border-radius: 0 90px 90px 0;
}

Semi Circle Facing Down

ankit-mathur-blog-simple-html-shapes-semi-circle-down

#semiCircleFacingDown{
background: #08c;
height: 45px;
width: 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
border-radius: 0 0 90px 90px;
}

Semi Circle Facing Left

ankit-mathur-blog-simple-html-shapes-semi-circle-left

#semiCircleFacingLeft{
background: #08c;
height: 90px;
width: 45px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
border-radius: 90px 0 0 90px;
}

Circle

ankit-mathur-blog-simple-html-shapes-circle

#circle{
width: 90px;
height: 90px;
background: #08c;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}

Ellipse

ankit-mathur-blog-simple-html-shapes-ellipse

#ellipse{
width: 180px;
height: 90px;
background: #08c;
-moz-border-radius: 90px/45px;
-webkit-border-radius: 90px/45px;
border-radius: 90px/45px;
}

Oval

ankit-mathur-blog-simple-html-shapes-oval

#oval{
width: 90px;
height: 180px;
background: #08c;
-moz-border-radius: 45px/90px;
-webkit-border-radius: 45px/90px;
border-radius: 45px/90px;
}

Colored Circle

ankit-mathur-blog-simple-html-shapes-colored-circle

#coloredCircle{
width: 0px;
height: 0px;
border-right: 60px solid red;
border-top: 60px solid green;
border-left: 60px solid blue;
border-bottom: 60px solid yellow;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

Quadrant 1

ankit-mathur-blog-simple-html-shapes-quadrant1

#quadrant1{
width: 90px;
height: 90px;
background: #08c;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
border-radius: 90px 0 0 0;
}

Quadrant 2

ankit-mathur-blog-simple-html-shapes-quadrant2

#quadrant2{
width: 90px;
height: 90px;
background: #08c;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
border-radius: 0 90px 0 0;
}

Quadrant 3

ankit-mathur-blog-simple-html-shapes-quadrant3

#quadrant3{
width: 90px;
height: 90px;
background: #08c;
-moz-border-radius: 0 0 90px 0;
-webkit-border-radius: 0 0 90px 0;
}

Quadrant 4

ankit-mathur-blog-simple-html-shapes-quadrant4

#quadrant4{
width: 90px;
height: 90px;
background: #08c;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
border-radius: 0 0 0 90px;
}

Pacman Up

ankit-mathur-blog-simple-html-shapes-pacman-up

#pacmanUp{
width: 0px;
height: 0px;
border-right: 60px solid #08c;
border-top: 60px solid transparent;
border-left: 60px solid #08c;
border-bottom: 60px solid #08c;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

Pacman Right

ankit-mathur-blog-simple-html-shapes-pacman-right

#pacmanRight{
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid #08c;
border-left: 60px solid #08c;
border-bottom: 60px solid #08c;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

Pacman Down

ankit-mathur-blog-simple-html-shapes-pacman-down

#pacmanDown{
width: 0px;
height: 0px;
border-right: 60px solid #08c;
border-top: 60px solid #08c;
border-left: 60px solid #08c;
border-bottom: 60px solid transparent;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

Pacman Left

ankit-mathur-blog-simple-html-shapes-pacman-left

#pacmanLeft{
width: 0px;
height: 0px;
border-right: 60px solid #08c;
border-top: 60px solid #08c;
border-bottom: 60px solid #08c;
border-left: 60px solid transparent;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

Heart

ankit-mathur-blog-simple-html-shapes-heart

#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
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%;
}

Corner Badge Left

ankit-mathur-blog-simple-html-shapes-corner-badge-left

#badgeLeft{
width: 0;
height: 0;
border-top: 50px solid #08c;
border-bottom: 50px solid transparent;
border-left: 50px solid #08c;
border-right: 50px solid transparent;
}

Bookmark

ankit-mathur-blog-simple-html-shapes-bookmark

#bookmark{
width: 0;
height: 100px;
border-left: 50px solid #08c;
border-right: 50px solid #08c;
border-bottom: 25px solid transparent;
}

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s