Logo - Albert Walicki

Creating basic and more advanced shapes in CSS

CSS gives us the opportunity to create multiple Shapes

Published:

image-to-css
Various shapes created with CSS and HTML

Making various shapes in CSS is easy. Squares and rectangles are the most common and natural shapes in web development. You need to add width and height, and that’s it. First two shapes are created. Adding border-radius and you have circles and ovals.

More complex shapes require to add :before and :after pseudo-elements or more HTML. That gives us two more shapes to create something complex. In terms of creating different shapes, your best friends will be transform and position.

Most of the shapes below designers would export as an image, but as we know - we should replace simple images with CSS to speed up our website.

Keep in mind: all shapes were built with box-sizing: border-box; on the body!

let’s start with basic shapes.

Basic shapes

Square shape

HTML
CSS
<div class="square"></div>
Preview

Rectangle shape

HTML
CSS
<div class="rectangle"></div>
Preview

Circle shape

HTML
CSS
<div class="circle"></div>
Preview

Elipse shape

HTML
CSS
<div class="circle"></div>
Preview

Isosceles triangle shape

HTML
CSS
<div class="isosceles_triangle"></div>
Preview

Triangle up shape

HTML
CSS
<div class="triangle_up"></div>
Preview

Triangle down shape

HTML
CSS
<div class="triangle_down"></div>
Preview

Triangle left shape

HTML
CSS
<div class="triangle_left"></div>
Preview

Triangle right shape

HTML
CSS
<div class="triangle_right"></div>
Preview

Triangle top left shape

HTML
CSS
<div class="triangle_top_left"></div>
Preview

Triangle top right shape

HTML
CSS
<div class="triangle_top_right"></div>
Preview

Triangle bottom right shape

HTML
CSS
<div class="triangle_bottom_right"></div>
Preview

Triangle bottom left shape

HTML
CSS
<div class="triangle_bottom_left"></div>
Preview

Trapezoid shape

HTML
CSS
<div class="trapezoid"></div>
Preview

Parallelogram shape

HTML
CSS
<div class="parallelogram"></div>
Preview

Star shape - 5 points

HTML
CSS
<div class="star_5"></div>
Preview

Star shape - 6 points

HTML
CSS
<div class="star_6"></div>
Preview

Star shape - 8 points

HTML
CSS
<div class="star_8"></div>
Preview

Star 12 points

HTML
CSS
<div class="star_12"></div>
Preview

Pentagon shape

HTML
CSS
<div class="pentagon"></div>
Preview

Hexagon shape

HTML
CSS
<div class="hexagon"></div>
Preview

Octagon shape

HTML
CSS
<div class="octagon"></div>
Preview

Diamond shape

HTML
CSS
<div class="diamond"></div>
Preview

More advanced shapes

Okay, all shapes above are pretty simple and common. let’s create something less common but also easy.

Cut diamond shape

HTML
CSS
<div class="diamond"></div>
Preview

Plus shape

HTML
CSS
<div class="plus"></div>
Preview

Clover shape

HTML
CSS
<div class="clover">
  <span class="t_left"></span>
  <span class="t_right"></span>
  <span class="b_left"></span>
  <span class="b_right"></span>
</div>
Preview

Heart shape

HTML
CSS
<div class="heart"></div>
Preview

Crescent shape

HTML
CSS
<div class="crescent"></div>
Preview

Half circle shape

HTML
CSS
<div class="half_circle"></div>
Preview

Drop shape

HTML
CSS
<div class="drop"></div>
Preview

Welcome to CSS-images world!

I hope that you will get familiar with CSS shapes. As you see, CSS shapes are enjoyable and easy. To test yourself, try to draw them on your own without looking in CSS code.

In the next article, we will be talking about creating bubble speeches 😎. Thanks for reading!

Read more

css
CSS button with gradient border

Pure CSS animated gradient colour button is easier than you think!

A quick guide on how to add some life to your website

Read more
Logo - Albert Walicki

Hello, i’m Albert Walicki. i’m a frontend developer and cofounder of development & design agency Hype4 and education platform Hype4 Academy. I wrote a book for Junior Frontend developers called Frontend Unicorn.

BlogGlassmorphismAurora UIShapes in CSSUnique css illustrations

Get in touch!

Have a question or need a project? Contact me!

© 2020-present Albert Walicki. All Rights Reserved