Css is a tricky thing with which we can create unique shapes be it in the background or as an object on the foreground. You might have noticed some little cute triangles added on the edge of some boxes to provide a unique look while squares, rectangles, rounded rectangles, ovals and circles are the regular ones we see most often in webpages. Lets see how we can create such shapes using css with ease.
Square shapes are very common in css. We use it as backgrounds or content boxes all the time. All we need to do is define equal height and width for the div element we want to style and add a background.
.square{
width: 100px;
height: 100px;
background: #222;
}
Another common css shape any web designer uses more often is the rectangle. It's a varied form of square where we define unequal height and width to any div element we want to style.
.rectangle{
width: 200px;
height: 100px;
background: #222;
}
Another common css shape is the rounded rectangle. It's a varied form of square / rectangle where we define border radius to make the corners round.
.rounded-rectangle{
width: 200px;
height: 100px;
background: #222;
border-radius: 10px;
}
If we deviate to a considerably higher border-radius value from a rounded rectangle, we'll get an oval shape. We will get an oval shape if we defined a higher border-radius to a rectangle.
.oval{
width: 200px;
height: 100px;
background: #222;
border-radius: 50%;
}
Similar to the square shape, a circle also needs to have equal width and height with 50% border-radius. If you want to add the border-radius in pixel value then it is the half of the height or width value of the shape.
.circle{
width: 100px;
height: 100px;
background: #222;
border-radius: 50%;
}
Triangles are also seen a lot in webpages especially to denote any links as active or to stylize regular content boxes to provide a unique look.
Creating a triangle is much easier than it looks. You simply need to define the width and height of the triangle as 0. Then, define the border-size of three sides of the triangle ommitting the one side where you want the top point of your triangle to face. Define a larger base border value and add some border color while defining smaller but equal base value for the other two sides with border color defined as transparent.
We can make the triangle turn anyside simply by changing its border properties.
Add a higher border-width value with solid border-color at the bottom along with smaller border-width values on the left and right side with transparent border-color and you'll get a triangle facing upwards.
.triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #222;
}
Replace the border-bottom property with a border-top property and you'll get a trianlge that's facing downwards.
.triangle-down{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #222;
}
Replace the border-left property with a border-top or border-bottom property and you'll get a trianlge that's facing downwards.
.triangle-left{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-right: 100px solid #222;
}
Replace the border-right property with a border-left and you'll get a trianlge that's facing downwards.
.triangle-right{
width: 0;
height: 0;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
border-left: 100px solid #222;
}
Right angled triangles are quick and easy to create than normal ones. We need to define the borders on two sides only while defining the height and width as 0.
To create a top left right angled triangle we need to define the border-top property with solid color and border-right property as a transparent border.
.top-left{
width: 0;
height: 0;
border-top: 100px solid #222;
border-right: 100px solid transparent;
}
To create a top right right angled triangle we need to define the border-top property with solid color and border-left property as a transparent border.
.top-left{
width: 0;
height: 0;
border-top: 100px solid #222;
border-left: 100px solid transparent;
}
To create a bottom left right angled triangle we need to define the border-bottom property with solid color and border-right property as a transparent border.
.bottom-left{
width: 0;
height: 0;
border-bottom: 100px solid #222;
border-right: 100px solid transparent;
}
To create a bottom right right angled triangle we need to define the border-bottom property with solid color and border-left property as a transparent border.
.top-left{
width: 0;
height: 0;
border-top: 100px solid #222;
border-left: 100px solid transparent;
}
Now, you know how to create these shapes. Lets add one of them to a regular one. Let's try to create a tooltip or a comment bubble like shape combining two shapes in css.
Here's the actual css used in this element.
.comment-bubble{
width: 200px;
padding: 10px 20px;
border-radius: 30px;
background: #222;
position: relative;
margin-bottom: 30px;
color: #fff;
text-align: center;
font-size: 12px;
}
.comment-bubble:after{
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 15px solid #222;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
right: 45%;
}