Creating Triangles Using Borders

How do CSS triangles work?

CSS Triangles: A Tragedy in Five Acts

As alex said, borders of equal width butt up against each other at 45 degree angles:

borders meet at 45 degree angles, content in middle

When you have no top border, it looks like this:

no top border

Then you give it a width of 0...

no width

...and a height of 0...

no height either

...and finally, you make the two side borders transparent:

transparent side borders

That results in a triangle.

How to create a transparent triangle with border using CSS?

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

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

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

Create a triangle on both top corners of Div, divided by borders

What about an easy way with less of code and linear-gradient:

.element {  width:300px;  height:100px;  background:   linear-gradient(to bottom left,  red 50%,transparent 50%) 100% 0/50px 50px,   linear-gradient(to bottom right, green 50%,transparent 50%) 0 0/50px 50px,      linear-gradient(to bottom right, brown 50%,transparent 50%) 0 0/60px 60px,   linear-gradient(to bottom left,  pink 50%,transparent 50%) 100% 0/60px 60px,  orange;  background-repeat:no-repeat;  text-align:center;  color:#fff;  font-size:40px;}

<div class="element"> A </div>

CSS triangle custom border color

You actually have to fake it with two triangles....

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

Updated Fiddle here

Sample Image

Adding border to CSS triangle

One way to do it is the create an inner triangle which is smaller.

.triangle-left {    width: 0;    height: 0;    border-top: 23px solid transparent;    border-bottom: 23px solid transparent;    border-right: 23px solid red;}
.inner-triangle {    position: relative;    top: -20px;    left: 2px;    width: 0;    height: 0;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;    border-right: 20px solid blue;}

<div class="triangle-left">    <div class="inner-triangle"></div></div>

How to put a border on a triangle shape using css?

jsBin demo

add arrow underneath selected list element

ul{
  list-style:none;
  background:#ddd;
  border-bottom: 1px solid #555;
}
ul li{
  display:inline-block;
}
ul li a{
  color:#555;
  display:inline-block;
  padding:10px;
  text-decoration:none;
  position:relative;
}
a.selected{
  color:#fff;
}
a.selected:after{                    /* Our arrow */
  position:absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  content:" ";
  width:8px;
  height:8px;
  border: 0 solid #555;
  border-width: 1px 0  0 1px;
  background:#fff;
  /* Now let's auto-center our arrow inside the pos. relative A parent */
  left:0;                           
  right:0;
  bottom:-5px;
  margin:0 auto;
}

Using :after on your a element, just set two borders and the same background color (in order to cover the bottom border of the ul), than rotate your little square by 45° and you're done.

How is it that CSS borders create a triangle?

user1637741, you ask a very good question.

Firstly, let me begin by explaining the purpose of content:"";. You see, what we're using here is a called a pseudo element. These are intended to add content to your page, like words or images. The triangle (or arrow) situation is a hack of sorts, in that we don't actually want to add any new content to our page; instead, we simply want to draw a border for the element (which, yes, will ultimately give us a triangle). However, the pseudoelement's content does more than specify what it contains. It also acts as the boolean to determine whether or not to display the element at all. In other words, if there's no content, the thing won't render. Luckily for us, simply passing an empty string is enough to make it display.

Okay, so now about that pesky border. How in the world does it make a triangle? In short, what we're doing is drawing a border on a single edge of the element, then positioning the element such that we only see what appears to be a triangle.

Here, let me show you. Check out this JSFiddle. This isn't anything too out of the ordinary. It's just a div that is only displaying a bottom border. But, if you stare and it and think about it, imagine hiding most of that border so that what's left is a triangle. If you removed all of it except one of the edges, we'd have a very little triangle left over. Can you see it?

Creating a triangle with only CSS

I believe you are looking for triangles with borders and a transparent cut in between (which none of the existing answers seem to address) and so here is an example. It's absolutely possible to achieve with but takes a lot of hacking around.

Using CSS Transforms:

The below snippet uses pseudo-elements and transforms to produce the triangles effect. The output is responsive but the usage of skew transforms mean that if the container's shape becomes a rectangle then the skew angles would need modification and more tweaking of the positioning attributes etc.

.container {  position: relative;  overflow: hidden;  height: 200px;  width: 200px;}.div-1,.div-2 {  position: absolute;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  overflow: hidden;}.div-1 {  top: calc(-100% - 5px);  transform: skewY(45deg);  transform-origin: left top;  border-bottom: 2px solid;}.div-1:after {  position: absolute;  content: '';  height: calc(100% - 2px);  width: calc(100% - 2px);  top: calc(100% + 7px);  left: 0px;  transform: skewY(-45deg);  transform-origin: left top;  border: 1px solid;}.div-2 {  top: 5px;  transform: skewY(45deg);  transform-origin: left bottom;  border-top: 1px solid;}.div-2:after {  position: absolute;  content: '';  height: calc(100% - 7px);  width: calc(100% - 7px);  top: 0px;  left: 0px;  transform: skewY(-45deg);  transform-origin: left bottom;  border: 1px solid;}* {  box-sizing: border-box;}
/* just for demo */.container{  transition: all 1s;}.container:hover{  width: 400px;  height: 400px;}body{  background: radial-gradient(circle at center, aliceblue, mediumslateblue);  min-height: 100vh;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class='container'>  <div class='div-1'></div>  <div class='div-2'></div></div>

Create a border on a triangle

DROP-SHADOW TECHNIQUE

The typical method of creating triangles in CSS (and the same method you're using) is to use the border trick. Using that technique, there are several approaches which can get you pretty close to what you want. This is the approach that I consider to be the simplest.

filter: drop-shadow(5px 0 0 #000);

By applying an un-blurred drop shadow with a bit of an offset, we can create a border on the right edge. Note that this technique uses the drop-shadow filter rather than a box-shadow (because box-shadow wouldn't properly wrap to the triangle), and therefore some vendor prefixing is required for acceptable browser support.

DEMO

Here's a runnable demo including vendor prefixes and proper cropping. If anything doesn't look right, let me know and I'll fix it.

This could be done without the wrapper element (just remove wrapper div and the margins on the child element), but it would have a small gap near the top and bottom corners of the triangle.

.triangle_wrapper {    /* crop out the edges to remove the undesired gap */  height: 40px;  overflow: hidden;  }.triangle-right {    /* give a little offset, so the wrapper can crop it properly */  margin-top: -5px;  margin-left: -5px;    /* border-hack triangles need no width or height */  width: 0;  height: 0;    /* this makes the triangle */  border-left: 25px solid #ff0000;  border-top: 25px solid transparent;  border-bottom: 25px solid transparent;    /* this adds the border */  filter: drop-shadow(5px 0 0 #000);  -webkit-filter: drop-shadow(5px 0 0 #000);  filter: progid: DXImageTransform.Microsoft.Shadow(Strength=0, offX=5px, offY=0px, Color='#000000');  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, offX=5px, offY=0px, Color='#000000')";  }

<div class="triangle_wrapper">  <div class="triangle-right"></div></div>