How to create different shapes in html using css






4.60/5 (9 votes)
Lets create different types of shapes in html using powerful and amazing css
Introduction
Guys lets learn how to create different types of cool shapes using simple css, and not using image.
Using the code
Ractangle
.rectangle {
width: 250px;
height: 150px;
background-color: #6DC75F;
}
<div class="rectangle"></div>
Triangle
.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
.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
.moon {
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 green;
}
<div class="moon"></div>
Leaf
.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.....