@coder 1017
CSS3 SHAPES
2021-11-17 00:21 · 5 min read
Do you know HTML elements can be converted into different shapes i.e. Square Shape, Rectangular Shape, Circle Shape, etc?
Square Shape
To create a square shape we just need to set the same value of CSS width and height property on HTML Block Elements.
<style>
.square{
width:100px;
height:100px
}
</style><head>
<style>
.square{
background-color:black;
width:100px;
height:100px;
color:white;
}
</style>
</head>
<body>
<div class="square">Square</div>
</body>
Rectangle Shape
To create a Rectangle Shape we can set different values of CSS width and height property on HTML Block Elements.
<style>
.square{
width:180px;
height:100px
}
</style><head>
<style>
.rect{
background-color:black;
width:200px;
height:100px;
color:white;
}
</style>
</head>
<body>
<div class="rect">Rectangle</div>
</body>
Triangle Shape
Here is an example of a Triangle using CSS properties.
- Triangle 1
- Triangle 2
<style>
.triangle1{width:0;height:0;border-left:100px solid transparent;
border-bottom:100px solid red}
.triangle2{width:0;height:0;border-left:100px solid transparent;
border-top:100px solid red}
</style><head>
<!--style sheet-->
<style>
.triangle1
{
width:0;
height:0;
border-left:100px solid transparent;
border-bottom:100px solid red
}
</style>
</head>
<!--Body-->
<body>
<div class="triangle1">
</div>
</body>
Circle Shape
We can use CSS3 border-radius property to create circles.
- Circle
<style>
.circle{
width:100px;
height:100px;
border-radius:50%;
background-color:red;
}
</style><head>
<style>
.circle{width:100px;
height:100px;
border-radius:50%;
background-color:red;
}
</style>
</head>
<body>
<div class="circle">
</div>
</body>
parallelogram Shape
We can use the CSS3 skew function to create a parallelogram.
- Parallelogram
<style>
.tdb-parallo{
width:100px;
height:70px;
transform:skew(25deg);
margin-left:20px;
background-color:red;
}
</style><head>
<style>
.tdb-parallo{width:100px;
width:100px;
height:70px;
transform:skew(25deg);
margin-left:20px;
background-color:red;
}
</style>
</head>
<body>
<div class="tdb-parallo">
</div>
</body>
TAGS:
POPULAR POSTS
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
