Create a triangle with CSS?

Question

How can I create the following shape with CSS?

I tried this to be a solution:

 .triangle:after {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        margin-top:1px;
        margin-left:2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    .triangle:before {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid black;
    }

You can see it working at Triangle. This is working, but with a trick of borders. Is there another way it could be done?

Using SVG vectors this can be done easily, but I don't want to go that lengthy way.

Answer 1

I've found a webkit-only solution, using the ▲ character:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

<div class="triangle">&#9650;</div>

Extras:

• CanIUse reference for text-stroke - all major browsers covered as of 2019
• CSS-tricks article
• Useful HTML shapes

Answer 2

CSS-border version:

.triangle {
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
.triangle .empty {
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;
}

Adding a white triangle inside the black one: http://jsfiddle.net/samliew/Hcfsx/

Answer 3

Try using SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

Here is the tutorial

Answer 4

You can use the method I described here : How does this CSS triangle shape work? with a rotated pseudo element. You can then add a border to the rotated pseudo element to create the effect you are looking for.

You can also use this technique to display the triangle with borders over an image, gradient or any non plain backgrounds :

DEMO

.tr{
  width:40%;
  padding-bottom: 28.28%; /* = width / sqrt(2) */
  position:relative;
  border-bottom: 6px solid rgba(0,0,0,0.8);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  overflow:hidden;
}
.tr:before{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:100%; height:100%;
  border-top:6px solid rgba(0,0,0,0.8);
  border-left:6px solid rgba(0,0,0,0.8);
  
  -moz-box-sizing:border-box;
  box-sizing:border-box;
    
  -webkit-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  transform-origin:0 100%;
    
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* FOLLOWING JUST FOR THE DEMO */
body{background:url('https://picsum.photos/id/100/1000/1000');background-size:cover;}

<div class="tr"></div>

Answer 5

Here is an idea using multiple background and linear-gradient:

.triangle {
  width:100px;
  height:100px;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(#000,#000) bottom/calc(100% - 20px) 10px;
  background-repeat:no-repeat;
}

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

You can consider CSS variables to easily adjust the shape:

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - 2*var(--t)) var(--t);
  background-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;height:150px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

A different syntax with less gradient:

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;height:150px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

You can consider the same idea to create a rectangle triangle:

.triangle {
  --t:10;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:calc(var(--t)*1px) solid transparent;
  border-image:
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50%) var(--t);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
      transparent calc(50% + var(--t)*1px + 1px));
  background-origin:border-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8;--c:red;height:150px"></div>

<div class="triangle" style="--t:15;--c:green;width:80px"></div>

If you want an equilateral triangle simply keep a ratio bettween the width/height using the initial code

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;
}

.triangle:before {
  content:"";
  display:block;
  padding-top:86.6%;
}

body {
 background:pink;
}

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

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;width:50px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

Related answer for more details about the calculation: How do CSS triangles work?

Answer 6

    .triangle{
        width:0;
        border-bottom:solid 30px black;
        border-right:solid 30px transparent;
        border-left:solid 30px transparent;
    }

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

This will be a triangle pointed towards the top. Don't specify the border to the side where you need it to be pointed.

The above is an equilateral triangle. Remove border-left to make it a right-angled triangle.

Answer 7

Consider using the <canvas> element. I build a simple triangle on jsfiddle - nothing fancy, yet.

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(10, 0);
    context.lineTo(20, 20);
    context.lineTo(0, 20);
    context.closePath();
    context.fill();

<canvas id="myCanvas" width="20" height="20"></canvas>

Answer 8

I found a nice solution, a bit tricky but for me it was the most easy way to do it: link to code-pen

.triangle {
position: absolute;
margin: auto;
top: -70px;
left: 0;
right: 0;
width: 137px;
height: 137px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;

}