Home »
CSS
Basic Shapes in CSS
Learn: How to create basic shapes like circle, rectangle, Triangle, square using Cascading Style Sheet (CSS)?
Submitted by Abhishek Pathak, on May 28, 2017
The face of the web page, CSS (Cascading Style Sheets) is an important ingredient of modern website. The latest version, CSS3 offers array of features for designers that enables them to create visually outstanding websites.
The CSS not only makes your web pages good, but can also help save your server bandwidth by rendering basic shapes all by client side browser. They are simple to code and fast, as client browser renders the code with the document styling in a single go.
Here the image of some basic shapes that we will create through the CSS:
Here's the code for a few basic shapes that forms the root of the advanced and complex shapes.
1) CSS for Square
.square {
width: 100px;
height: 100px;
background: #f56;
}
Pretty easy and straightforward, define equal width and height and apply a background. There you go, with a nice square box.
2) CSS for Rectangle
.rectangle {
width: 200px;
height: 100px;
background: #f56;
}
I believe it isn't difficult to think by what constraints it differs from square. Yes, unequal width and height are the correct answer.
3) CSS for Circle
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #f56;
}
A circle is a square, but with rounded corners. The code for circle is similar to square but with an additional property added called border-radius.
4) CSS for Triangle
.triangle {
width: 0px;
height: 0px;
border: 20px solid transparent;
border-bottom-color: #f56;
}
Creating triangle can be tricky, but once you understand this one, you can call yourself a CSS expert.
For a triangle, assign the width and height to 0. This is because we will use only borders. Then apply border property, let's say, 20px solid transparent. Why transparent you ask, simply because we want to hide the other border and use just one border.
Then apply this property border-bottom-color: #ff5566 and you are left with a cute little triangle on your screen.
Complete HTML code with the CSS to display Basic shapes
<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Shapes</title>
<style type="text/css">
div {
margin: 20px auto;
}
.square {
width: 100px;
height: 100px;
background: #2ecc71;
}
.rectangle {
width: 200px;
height: 100px;
background: #9b59b6;
}
.circle {
width: 100px;
height: 100px;
background: #2980b9;
border-radius: 50%;
}
.triangle {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #e74c3c;
margin-top: -80px;
}
</style>
</head>
<body>
<div class="square"></div>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
</body>
</html>
DEMO
CSS Tutorial & Examples »