Creating a triangle div with CSS

Question

I have recently learned how to create the appearance of a triangle div with CSS and HTML. Now, I would like to know if it is at all possible to add a border around any of the sides of the triangle div, so that if I gave the div a white background and a black border you could still see it? Is there a way I can do this?

JSFIDDLE: http://jsfiddle.net/c75KM/1/

HTML:

<div class="arrow-up"></div>

CSS:

.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}

Postorbital

See this SO answer: https://mcmap.net/q/1051130/-how-to-make-a-pure-css-triangle-which-has-a-white-center – Samurai

Answer 1

This is the typical way to do it:

JSFiddle

.arrow-up: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;
}

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

Branchiopod

content is to make the pseudo-elements :before and :after visible. In the above I'm sort of using two 'fake' elements which are related to .arrow-up, we could do it with two separate elements but it wouldn't be as nice. Read up further here css-tricks.com/pseudo-element-roundup – Branchiopod

Answer 2

You can do it using the CSS clip-path property:

div { 
   -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);   
   background: blue;   
   width: 100px;   
   height:100px;                                                      
}

<div></div>

Sale