Css Triangle Custom Border Color

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>

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

enter image description here

Adding borders to triangle built as borders

You can add the triangle borders with another pseudo element.

.dropdown-content:before,
.dropdown-content:after {
  position: absolute;
  left: 70%;
  width: 0;
  height: 0;
  content: '';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom-width: 20px;
  border-bottom-style: solid;
}
.dropdown-content:before {
  top: -21px; /* extra -1 pixel offset at the top */
  border-bottom-color: red;
}
.dropdown-content:after {
  top: -20px;
  border-bottom-color: yellow;
}

.dropdown {  position: relative;  vertical-align: middle;  display: inline-block;}
.dropdown-content {  position: absolute;  min-width: 160px;  background-color: yellow;  padding: 12px 16px;  margin-top: 20px;  z-index: 1;  border-color: red;  border-width: thin;  border-style: solid;}
.dropdown-content a {  display: block;}
.dropdown-content:before,.dropdown-content:after {  position: absolute;  left: 70%;  width: 0;  height: 0;  content: '';  border-left: 20px solid transparent;  border-right: 20px solid transparent;  border-bottom-width: 20px;  border-bottom-style: solid;}
.dropdown-content:before {  top: -21px; /* extra -1 pixel offset at the top */  border-bottom-color: red;}
.dropdown-content:after {  top: -20px;  border-bottom-color: yellow;}

<div class='dropdown'>  <div class="dropdown-content">    <a href="#">Link 1</a>    <a href="#">Link 2</a>    <a href="#">Link 3</a>  </div></div>

Add a border to a triangle using pure CSS

The only way you could do something like this is to create another arrow just like it and put it behind the first to fake the border like this:

.arrow-tip {    width: 0;     height: 0;     border-left: 15px solid transparent;    border-right: 15px solid transparent;    border-bottom: 15px solid #222;    position: relative;}
.arrow-tip:after {    content: "";    display: block;    width: 0;     height: 0;     position: absolute;    bottom: -16px;    left: -17px;    z-index: -1;    border-left: 17px solid transparent;    border-right: 17px solid transparent;    border-bottom: 17px solid red;}

<div class="arrow-tip"></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.

Add a border to a linear-gradient shape

You just need to add two additional color stops in between. For example, if you want the border to have 2% of the size, then you can change the color stops to:

transparent 49%, black 49%, black 51%, #DFC7A9 51%

See example below:

body {
  margin: 0;
  padding: 0;
}

#intro {
  display: block;
  background: linear-gradient(to bottom left, transparent 49%, black 49%, black 51%, #DFC7A9 51%) bottom left / 100% 40% no-repeat, transparent;
  width: 100%;
  height: 100vh;
}

<div id="intro"></div>

CSS how can I add border also to triangle?

Use the :before pseudo-element to create a like-for-like triangle with just a few adjustments, to make it seem like your :after element has a border:

.slide{    position: relative;    padding: 15px;    }        .arrow {    max-width: 300px;    background-color: #E01616;    position: absolute;    top: -10px;    left: -10px;    margin: 5px 0 0 5px;    border: 3px solid black;}.arrow:after {    left: 100%;    bottom: 0px;    content: "";    height: 0;    width: 0;    position: absolute;    pointer-events: none;    border-width: 15px;    border-bottom: 30px solid #E01616;    border-right: 30px solid transparent;}
.arrow:before {    left: 100%;    bottom: -3px;    content: "";    height: 0;    width: 0;    position: absolute;    pointer-events: none;    border-width: 15px;    border-bottom: 37px solid #000;    border-right: 37px solid transparent;}

<div class="slide">    <div class="arrow">        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque ex eget ultricies blandit.</p>    </div></div>