Changing border color of a CSS shape

Question

I am trying to change the border-color of a CSS shape but have been unsuccessful. Every time I play around the elements below, it changes the whole color of the shape.

.pointer {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid red;
    border-bottom: 5px solid transparent;
    position:relative;
}

I want to be able to change the left, right, top, bottom border-color. Can someone help out?

Answer 1

This is because the entire shape is the border.

The only way to create a border around an irregular shape that uses borders like you have is to either layer two of them or create it in a way that doesn't use borders

Here's a way to add border by layering another triangle

.pointer:before {
    content:'';
    position:absolute;
    left:-15px; /* position it to the left and top of the parent element */
    top:-10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* Increase the size of it */
    border-left: 20px solid black;
    border-bottom: 10px solid transparent;
    z-index:-1; /* Put it behind the parent element */
}

Demo