3

So, i've created a triangle that points up with a background color of#222 using pure CSS. I want to add a red 1px border to that triangle, but I have no idea how.

.arrow-tip {
    width: 0; height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #222;
}
Marco
  • 2,687
  • 7
  • 45
  • 61
  • This is how I would do it, a little different than your approach - using a unicode character for a triangle, then adding a text-shadow for the border. Small, simple, and clean. Just something to think about. See it here: http://jsfiddle.net/n8Lj4nfv/ – Howard Renollet Nov 19 '14 at 20:09
  • @j08691 haven't you mark this as duplicated? – DaniP Nov 19 '14 at 20:45
  • @Danko - I did initially, but then I went back and saw that it wasn't really a true dupe and re-opened it. – j08691 Nov 19 '14 at 20:48

2 Answers2

2

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>

You'll have to play with the dimensions until you get it just right.

Barry T. Smith
  • 1,021
  • 7
  • 10
1

You can use the :before and :after sudo selectors to create an arrow shape.

.arrow-tip { 
    position: relative;
    margin-top: 100px;
}
.arrow-tip:after,
.arrow-tip:before { 
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow-tip:after { 
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #222;
    border-width: 15px;
    margin-left: -15px;
}
.arrow-tip:before {
    bottom: -1px;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: red;
    border-width: 17px;
    margin-left: -17px
}
<div class="arrow-tip"></div>

JsFiddle Example: http://jsfiddle.net/tud0czmq/1/

Axel
  • 10,732
  • 2
  • 30
  • 43