Shapes in CSS

Making rectangles in CSS is easy, and maybe you already know how to create a circle. But what about other shapes?

Check out this Codepen to see how these and some other shapes work: https://codepen.io/michaelthiessen/pen/jOyEqwp

Circle

To make a circle, just set border-radius: 50% on a square:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Semi-Circle

Here we create a circle but then use another div with overflow: hidden to cut off half of it:

<div class="semi-circle">
  <div></div>
</div>
<style scoped>
.semi-circle {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.semi-circle > div {
  /* Create a circle that fills the box */
  border-radius: 50%;
  width: 100%;
  height: 100%;

  /* Shift the circle down so half of it gets cut off */
  position: relative;
  top: 50%;

  background: teal;
}
</style>

Triangle

If we play around with border thicknesses, we can also get angled shapes, like triangles and rhombuses:

.triangle {
  border-bottom: solid teal 150px;
  border-left: solid transparent 100px;
  border-right: solid transparent 100px;
}

CSS tricks has a great short article on how this works if you want to dive into it more.