How to make triangle shape in before a div in pure css?

Question

Hello friends I have tried many times but I am not successful than please help me

I want to this below images as like this

Answer 1

Write like this:

.dashbord .active:after{
    content:'';
    position:absolute;
    right:-11px;
    top:3px;
    z-index:-1;
    width:22px;
    height:22px;
    background:green;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    box-shadow:-3px 0 0 0 rgba(153,40,19,1) inset;
    background: -moz-linear-gradient(left top, #e94541 0%,#b43720 100%);
    background: -webkit-linear-gradient(left top, #e94541 0%,#b43720 100%);
    background: linear-gradient(left top, #e94541 0%,#b43720 100%);
}

Check this http://jsfiddle.net/TBB9S/2/