CSS shape generator sometimes used for generating or forming totally different formed objects. CSS is capable of constructing all kinds of shapes. CSS form generator add a breadth and height and you have got the precise size parallelogram you would like. Add border-radius and you’ll spherical that shape.
- Circle
- Ellipse
- Square
- Rectangle
- Polygon
- Trapezoid
- Parallelogram
- Moon
Example:-
1. Circle
We will get circle form by assignment border radius property 50%.
Syntax:-
class{
height:300px;
width:300px;
border-radius:50%;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of circle shape</title>
<style type="text/css">
.circ{
width:250px;
height:250px;
border-radius:50%;
background: #0000ff;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="circ"></div>
</body>
</html>
Output:-
2. Ellipse
We will get conic section form by assignment border-radius specifically 1/2 the breadth and height.
Syntax:-
class{
width:400px;
height:200px;
border-radius:200px/100px;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Ellipse shape</title>
<style type="text/css">
.ellip{
width:400px;
height:200px;
border-radius:200px/100px;
background: #0000ff;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="ellip"></div>
</body>
</html>
Output:-
3. Square
We will get sq. by assignment breadth and height ought to be same.
Syntax:-
class{
width:400px;
height:400px;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of square shape</title>
<style type="text/css">
.sq{
width:400px;
height:400px;
background: #ff0000;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="sq"></div>
</body>
</html>
Output:-
4. Rectangle
We will get sq. by assignment breadth and height ought to diverge.
Syntax:-
class{
width:400px;
height:200px;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Rectangle shape</title>
<style type="text/css">
.recta{
width:400px;
height:200px;
background: #ff0000;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="recta"></div>
</body>
</html>
Output:-
5. Polygon
The polygonal shape contains five sides.
Syntax:-
class{
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
position: relative;
border-color: greeen transparent;
}
class:before{
top: -85px;
left: -18px;
border-width: 0 45px 35px;
content: "";
position: absolute;
border-color: transparent transparent green;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Polygon shape</title>
<style type="text/css">
.poly{
border-style: solid;
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-color: skyblue transparent;
box-sizing: content-box;
border-width: 50px 18px 0;
}
.poly:before{
border-width: 0 45px 35px;
border-style: solid;
content: "";
position : absolute;
height : 0;
width : 0;
top : -85px;
left : -18px;
border-color: transparent transparent
skyblue;
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="poly"></div>
</body>
</html>
Output:-
6. Trapezoid
Trapezoid form is obtained by simply take away the highest half from Pentagon
Syntax:-
class{
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
position: relative;
border-color: pink transparent;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Trapezoid shape</title>
<style type="text/css">
.trap{
border-style: solid;
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-color: pink transparent;
box-sizing: content-box;
border-width: 50px 18px 0;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="trap"></div>
</body>
</html>
Output:-
7. Parallelogram
Parallelogram is obtained sort of a parallelogram however has tipped some angle on a vertical and horizontal plane.
Syntax:-
class{
width: 350px;
height: 250px;
transform: skew(30deg);
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Parallelogram shape</title>
<style type="text/css">
.pall{
width: 350px;
height: 250px;
transform: skew(30deg);
background: lightgrey;
margin-left:70px;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="pall"></div>
</body>
</html>
Output:-
8. Moon
Syntax:-
class{
border-radius: 50%;
box-shadow: 15px 15px 0 0 pink;
}
Code:-
<!DOCTYPE html>
<html>
<head>
<title>Example of Moon shape</title>
<style type="text/css">
.m{
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 25px 25px 0 0 green;
}
</style>
</head>
<body>
<h1>Gurukulzone SRCS</h1>
<div class="m"></div>
</body>
</html>
Output:-
Thanks for your article
[…] Use CSS shape generator to adjust shapes […]
[…] Use CSS shape generator to adjust shapes […]