In this tutorial we go to learn about shapes in CSS. It can be used to make squares, triangles, circles, many other shapes. It can sometimes be beneficial to use it for simple shapes rather than relying on SVGs or images.
.jpg "Shapes in CSS") |
| Shapes in CSS |
Square
The CSS square shape can be created by setting the width and height to equal values.
Example
HTML
<div class="square"></div>CSS
.square {
width: 64px;
height: 64px;
background: #5394fd;
}
Rectangle
The CSS rectangle shape can be created by setting the width and height to different values.
HTML
<div class="rectangle"></div>CSS
.rectangle {
width: 128px;
height: 64px;
background: #5394fd;
}
Circle
The circle shape can be created by using border radius 50%. To create a circle shape the width and height must be the same.
Example
HTML
<div class="circle"></div>create a div container with class name circle.
CSS
.circle {
width: 64px;
height: 64px;
border-radius: 50%;
background: #5394fd;
}Ellipse
The ellipse shape can be created by two values for the border-radius and the width and height are different values.
Example
HTML
<div class="ellipse"></div>create a div container with class name ellipse.
CSS
.ellipse {
width: 128px;
height: 64px;
border-radius: 64px / 32px;
background: #5394fd;
}The border-radius: 64px / 32px; creates elliptical corners. The first value (64px) sets the horizontal radius, and the second value (32px) sets the vertical radius.
Triangles
A triangle shape can be created by using three borders. The border-width should be the same for all borders, and the border that is opposite to the direction the triangle points should feature the desired border color. The borders next to it should have a transparent color.
Example
HTML
<div class="triangle-down"></div>
<div class="triangle-up"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>CSS
.triangle-down {
width: 0;
height: 0;
border-top: 32px solid #5394fd;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
}
.triangle-up {
width: 0;
height: 0;
border-bottom: 32px solid #5394fd;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
}
.triangle-left {
width: 0;
height: 0;
border-right: 32px solid #5394fd;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
}
.triangle-right {
width: 0;
height: 0;
border-left: 32px solid #5394fd;
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
}.jpg&description=Shapes in CSS){kind=link}