Click here to Skip to main content
14,971,409 members
Articles / Web Development / HTML5
Posted 3 Nov 2015


14 bookmarked

How to create different shapes in html using css

Rate me:
Please Sign up or sign in to vote.
4.60/5 (9 votes)
3 Nov 2015CPOL
Lets create different types of shapes in html using powerful and amazing css


Guys lets learn how to create different types of cool shapes using simple css, and not using image.

Using the code



<code>.rectangle {
    width: 250px;
    height: 150px;
    background-color: #6DC75F;

<div class="rectangle"></div></code>



<code>.triangleUp {
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            border-bottom: 150px solid  #6DC75F;
            width: 0;
            height: 0;

<div class="triangleUp"></div></code>



<code>.oval {
    width: 300px;
    height: 150px;
    background: #6DC75F;
    -moz-border-radius: 150px / 75px;
    -webkit-border-radius: 150px / 75px;
    border-radius: 150px / 75px;

<div class="oval"></div></code>


The amazing moon


<code>.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 green;

<div class="moon"></div></code>




<code>.leaf {
    border-radius: 5px 300px 3px 300px;
    background: #6DC75F;
    width: 150px;
    height: 150px;

<div class="leaf"></div></code>


Points of Interest

With css you can do amazing things...

Happy coding.....


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Najmul Hoda
Software Developer (Senior) Birla Soft
India India
Najmul Hoda is a Master of Computer Application.
He has worked with .Net technologies in web development and has been programming since 2007.
He is very comfortable in various languages,RDBMS,C# to VB.NET with Access & MS SQLServer from Javascript,AJAX to ASP.NET, MVC.

Khata Wata (Free Online Udhar Khata, Bahi Khata)
Download from play store

Comments and Discussions

QuestionCreate TAG Shape using css Pin
Member 1265954227-Dec-16 1:43
MemberMember 1265954227-Dec-16 1:43 
GeneralMy vote of 5 Pin
JH645-Nov-15 2:14
MemberJH645-Nov-15 2:14 
GeneralRe: My vote of 5 Pin
Najmul Hoda9-Nov-15 6:00
MemberNajmul Hoda9-Nov-15 6:00 
SuggestionGood article. Visit here for more shapes. Pin
FrostedSyntax4-Nov-15 1:02
MemberFrostedSyntax4-Nov-15 1:02 
GeneralRe: Good article. Visit here for more shapes. Pin
Najmul Hoda4-Nov-15 4:26
MemberNajmul Hoda4-Nov-15 4:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.