CSS Triangles from stretch to end with examples

Triangles — Creating the different shapes of triangles using HTML and CSS is very simple and we can incorporate the triangles in websites in many ways. and Today I’ll show you how to create the triangles and how to incorporate them in the websites with few examples.

We can create the different kinds of triangles using HTML and CSS. and check out few of them I listed below

— Top pointing triangle
— Bottom pointing triangle
— Right pointing triangle
— Left pointing triangle
— Top-left pointing triangle
— Top-right pointing triangle
— Bottom-left pointing triangle
— Bottom-right pointing triangle

First Let me explain the basic concept behind creating the triangles

The Main concept behind creating the triangles are CSS border property(border-left, border-right, border-right, border-left) and transparent border color. let me explain with one example so that you can understand the concept better.

Consider a div element with class:triangle and style the div by setting its width, height to 0px and set the same border value for all borders but set the different colors for each border, now we can see clearly what’s happening.

.triangle{
          width: 0px;
          height: 0px;
          margin: 20px auto;
          border-top: 100px solid black;
          border-bottom: 100px solid red;
          border-right: 100px solid green;
          border-left: 100px solid blue;
}

When we are using different colors for each border, we can see the four triangles are forming at the center point. Now by setting the color of the each border to transparent we can form different triangles.

Creating the Triangles with few real time examples

Hope! By now you guys have understood the basic concept behind creating the triangles. just by setting border color transparent we can create some amazing stuff.

Now let me show you guys how to create the triangles one by one which were I mentioned above. and later I’ll show you how to use them in websites

Consider a 8 div elements with different classes.
Left pointing triangle: Now Style the div element with class:lp-triangle by setting its width, height to 0px and by giving same border value to all borders. and now set the border-bottom: 50px solid black; and rest of the all border-colors to transparent, for achieving the left pointing triangle.
```
.lp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid #000;
          border-right: 50px solid  transparent;
          border-top: 50px solid  transparent;
          border-bottom: 50px solid  transparent;
          margin: 20px auto;
}
```

Right pointing triangle: To achieve the right pointing triangle just set the border-right: 50px solid #000; by setting all border colors to transparent.

.rp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid transparent;
          border-right: 50px solid  #000;
          border-top: 50px solid  transparent;
          border-bottom: 50px solid  transparent;
          margin: 20px auto;
}

Top pointing triangle: To achieve the top pointing triangle just set the border-top:50px solid #000; by setting all border colors to transparent.

.tp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid transparent;
          border-right: 50px solid  transparent;
          border-top: 50px solid #000;
          border-bottom: 50px solid transparent;
          margin: 20px auto;
}

Bottom pointing triangle: To achieve the bottom pointing triangle just set the border-bottom:50px solid #000; by setting all border colors to transparent.

.bp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid transparent;
          border-right: 50px solid  transparent;
          border-top: 50px solid transparent;
          border-bottom: 50px solid #000;
          margin: 20px auto;
}

That’s it we are done with half of the triangles, Now I’ll show you guys how to create few more triangles.

Top-left pointing triangle: Style the div element with class:tlp-triangle by setting its width, height to 0px and by setting same border value to all borders. and for creating the top-left pointing triangle set the border top and left colors to black border-top:40px solid #000;border-left:40px solid #000; and rest of the all border colors to transparent.
```
.tlp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid #000;
          border-right: 50px solid  transparent;
          border-top: 50px solid #000;
          border-bottom: 50px solid transparent;
          margin: 20px auto;
}
```

Top-right pointing triangle: To achieve the top-right pointing triangle set the border top and right colors to black border-top:40px solid #000;border-right:40px solid #000; and rest of the all border-colors to transparent.

.trp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid transparent;
          border-right: 50px solid  #000;
          border-top: 50px solid #000;
          border-bottom: 50px solid transparent;
          margin: 20px auto;
}

Bottom-right pointing triangle: To achieve the bottom-right pointing triangle set the border bottom and right colors to black border-bottom:40px solid #000;border-right:40px solid #000; and rest of the all border-colors to transparent.

.brp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid transparent;
          border-right: 50px solid  #000;
          border-top: 50px solid transparent;
          border-bottom: 50px solid #000;
          margin: 20px auto;
}

Bottom-left pointing triangle: To achieve the bottom left pointing triangle set the border bottom and left colors to black border-bottom:40px solid #000;border-left:40px solid #000; and rest of the all border-colors to transparent.

.blp-triangle{
          width: 0px;
          height: 0px;
          border-left: 50px solid #000;
          border-right: 50px solid  #000transparent;
          border-top: 50px solid transparent;
          border-bottom: 50px solid #000;
          margin: 20px auto;
}

See the Pen Triangles by rajeshdn (@cool_lazyboy) on CodePen.0

Now I’ll explain you guys some real time application of triangles in websites as I promised at the beginning of this article.

These are the examples I’m going to explain today
— CSS Speech Bubbles
— Tool-Tip
— Search-Box
— Landing Pages
— CSS Ribbons
— Using the triangles as Bullets in lists
— Title Cards

CSS SPEECH BUBBLES :
Speech bubbles can be created with single HTML element, so here I’m going to use div element to create rectangular shape and for creating triangles I’m going to use CSS pseudo-elements. check out my previous article where I’ve created a different kinds CSS speech bubbles

CSS pseudo-elements
we can use the CSS :before and :after pseudo-elements to generate the content before and after the elements. really playing with CSS pseudo-elements is fun.

First consider a div element with class: sb and style the div element.

.sb{
  width: 300px;
  margin: 50px auto;
  background: #bb0000;
  padding: 20px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  font-family: arial;
  position: relative;
}

now add the before pseudo element to the div element and style it

.sb:before{
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid #bb0000;
  border-right: 10px solid transparent;
  border-top: 10px solid #bb0000;
  border-bottom: 10px solid transparent;
  right: -20px;
  top: 6px;
}

we can use either of the pseudo elements to create the triangles here I’m using before pseudo element.

See the Pen simple speech bubbles by rajeshdn (@cool_lazyboy) on CodePen.0

TOOL-TIP:
Consider a div element with class:btn and a span element inside the div element with class:tooltip.

style the div element

.btn{
  width: 200px;
  margin: 70px auto;
  border: 3px solid #bb0000;
  padding: 10px;
  text-align: center;
  color: #bb0000;
  font-weight: 900;
  font-family: arial;
  position: relative;
  cursor: pointer;
}

style the span element with class:tooltip

.btn .tooltip {
  position: absolute;
  top: -50px;
  left: 14%;
  width: 150px;
  color: #fff;
  background: #bb0000;
}

add before psuedo element to the span element with class:tooltip

.tooltip:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: -20px;
  left: 40%;
  border-top: 10px solid #bb0000;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

Now set the display of the span element to none so that whenever the mouse pointer is hovered over the div element we can see the tool-tip pointing towards the div element.

.btn .tooltip {display:none;}
.btn:hover .tooltip {display: block;}

See the Pen tool-tip by rajeshdn (@cool_lazyboy) on CodePen.0

SEARCH-BOX:
Check out our previous article where we clearly explained about, how to create a search-box with the help of triangle.

CSS RIBBONS:
Creating the CSS ribbons are very simple. It can be created with single HTML element. so here i’m going with div element.

Consider a div element with class:ribbon and style it.

.ribbon{
  width: 0px;
  height: 0px;
  margin: 30px auto;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-left: 50px solid #000;
  border-right: 50px solid #000;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

what I did here is, just setting the one of the border color to transparent, thus I’ve created four CSS ribbons by setting each time each border color to transparent.

See the Pen css ribbons by rajeshdn (@cool_lazyboy) on CodePen.0

Using the triangles as BULLETS in lists
Consider the un-ordered list and style them. and for creating a bullet triangles here I’m going to use before psuedo-element. its really very simple to get triangle bullets by just making the un-ordered bullets style to none and putting the triangles in the right place.

Just go through the below steps
Consider a un-ordered list and style them.

ul{position:relative;}

 li:before{
    content:"";
    width: 0px;
    height: 0px;
    position:absolute;
    left: 43%;
    border-left: 5px solid #000;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-top: 5px;
}

See the Pen VprXmL by rajeshdn (@cool_lazyboy) on CodePen.0

TITLE-CARDS:
I’m very fond of title-cards, the reason behind it is, it attract the visitors very easily and gives some unique feeling to visitors.

Consider the div with class:box and inside the parent div element consider two more div elements with classes class:title-cardclass:title-content. here one div element is for creating the title-card and one more div element is for content to display.

Style the parent div element by giving width, height and margin:auto to float the parent div element in the center of the window.and make it’s position:relative so that we can move the child element’s very easily.

.box {
  width: 250px;
  height: 250px;
  background: #60bfc3;
  margin: 50px auto;
  position: relative;
}

Now style the div element with class:title-card, here with the help this div element we are going make the triangle. and by using before pseudo-element we can achieve the title on the title-card triangle.

.title-card {
  width: 0px;
  height: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-top: 65px solid #1b708c;
  border-bottom: 65px solid transparent;
  border-left: 65px solid #1b708c;
  border-right: 65px solid transparent;
}

Here I’m passing the ‘HTML’ title through the content property of the pseudo-element and I’ve added the styles to it. and for rotating the title I’ve used the CSS rotate() method.

.title-card:before {
  content: "HTML";
  position: absolute;
  left: -55px;
  top: -35px;
  color: #fff;
  font-family: cursive;
  font-weight: 900;
  transform: rotate(-50deg);
}

Now align the text to the center of the div by giving text-align:Center; and margin properties.

.title-content {
  text-align: center;
  position: absolute;
  top: 50%;
  margin: 0px 20px;
  font-family: cursive;
  color: #fff;
}

See the Pen title card by rajeshdn (@cool_lazyboy) on CodePen.0

VUE.js Landing Page
There are many landing pages which were using triangles out there. but I’ve chosen to create the vue.js landing page.

Start with div element and inside the parent div element consider four div elements, in which three div elements are for creating the triangles and one div for showing content on the landing page.

First style the parent div with class:wrapper by making its position:relative and by adding box-shadow.

#wrapper {
  width: 600px;
  height: 420px;
  background: #dddcdb;
  box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.75);
  margin: auto;
  margin-top: 50px;
  position: relative;
}

Now style the each div element with triangle classes one by one, make the all triangle div elements position: absolute so that we can place the triangles in the prefect place.

.triangle1 {
  position: absolute;
  width: 0px;
  height: 0px;
  left: 9%;
  border-left: 250px solid transparent;
  border-right: 250px solid transparent;
  border-top: 421px solid #4bb890;
  border-bottom: 300px solid transparent;
}

.triangle2 {
  position: absolute;
  width: 0px;
  height: 0px;
  left: 17%;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 321px solid #366667;
  border-bottom: 300px solid transparent;
}

.triangle3 {
  position: absolute;
  width: 0px;
  height: 0px;
  left: 25%;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 221px solid #c3d1d2;
  border-bottom: 300px solid transparent;
}

Now place the content in right place and for doing this use the position:absolute and so that we can place the text where ever we want. and use the z-index property to make the content lie over the top of all elements.

.text {
  position: absolute;
  z-index: 999;
  text-align: center;
  font-family: cursive;
  bottom: 30px;
  left: 10%;
  color: #fff;
  font-weight: 900;
}

See the Pen VUE landing page by rajeshdn (@cool_lazyboy) on CodePen.0

Final notes ..
I have gone through many articles, where I just found, how to create a triangles. but for real time examples, again I have gone through many articles. So I planned to write down a article where I can show from stretch to end — how to create a triangles as well as how to implement them in web. Hope ! You guys like it.