Create Triangles in Pure CSS

C
Published in: CSS

You can create triangle in your HTML web pages in pure CSS without requiring any JavaScript or images.

CSS Triangles

This one creates an isosceles triangle pointing downwards. Should come handy for creating speech bubbles.

<div class="triangle"></div>

<style>

.triangle {
 border-top: 100px solid black;
 border-left: 100px dashed transparent;
 border-right: 100px dashed transparent;
 border-bottom: 0;
 display: block;
 overflow: hidden;
 width: 0;
 height: 0;
}

</style>

And here’s another CSS snippet that generates a right angle triangle.

<div class="triangle"></div>

<style>

.triangle {
  border-top: none;
  border-left: none;
  border-right: 100px dashed transparent;
  border-bottom: 100px solid black;
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
}

</style>

You can combine 4 different-colored triangles and create a square box.

<div class="square"></div>

<style>

.square {
 border-top: 100px solid #0099ff;
 border-left: 100px solid #ff9900;
 border-right: 100px solid #F6402D;
 border-bottom: 100px solid #8CC63E;
 display: block;
 overflow: hidden;
}

</style>
Published in: CSS

Looking for something? Find here!

Meet the Author

Web Geek, Tech Columnist
A
Amit Agarwal

Amit Agarwal is a Google Developer Expert in GSuite and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. Read more on Lifehacker and YourStory

Get in touch