How to create different shapes in html using css

Nov 3, 2015

1 min read

ASP

ASP.NET

CSS

Beginner

Intermediate

CSS

HTML

MVC

CSS3

HTML5

by Najmul Hoda

Contributor

34k Views

Introduction

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

Using the code

Ractangle

CODE

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

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

Triangle

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>

Oval

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>

The amazing moon

CODE

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

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

Leaf

CODE

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

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

Points of Interest

With css you can do amazing things...

Happy coding.....

License

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