Create Triangles in Pure CSS

Home

February 15, 2017

Amit Agarwal

@labnol

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>

CSS

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

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

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory