The Developer Brains


CSS3 SHAPES

Web Designing | Web Development


SEE MORE














</CSS3 ELEMENT SHAPES>





Do you know HTML elements can be converted into different shapes i.e. Square Shape, Rectangular Shape, Circle Shape, etc.


SEE MORE

























</Convert HTML Element's Shapes>


Square Shape

To create a square shape we just need to set 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>




Try it Yourself





Rectangle Shape

To create a Rectangle Shape we can set differen 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>




Try it Yourself





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>




Try it Yourself





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>




Try it Yourself





parallogram Shape

We can use CSS3 skew function to create a parallogram.

  • Parallogram

	
<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>




Try it Yourself





















Is it possible to create different shapes using CSS3.
1. yes
2. no




Check Now



CSS3 QUIZ







Next: CSS3 Inheritance


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers