How can I add background color to CSS triangles?

I am trying to show events in timeline view using below code:

HTML

<div class="panel-body">
    <ul class="timeline">
        <li>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">Timeline Event</h4>
                    <p>
                        <small class="text-muted"><i class="fa fa-time"></i> 11 hours ago via Twitter</small>
                    </p>
                </div>
                <div class="timeline-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                </div>
            </div>
        </li>
        <li class="timeline-inverted">
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                </div>
            </div>
        </li>
        <li>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4 class="timeline-title">Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel justo eu mi scelerisque vulputate. Aliquam in metus eu lectus aliquet egestas.</p>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS is updated in fiddle.

I am trying to add background to popup; the background color is currently white. I tried to add background-color property, but for arrow background is not reflecting.

I tried to add background-color to this CSS:

.timeline > li > .timeline-panel {
    background-color: #008000;
    border: 1px solid #D4D4D4;
    border-radius: 2px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.176);
    float: left;
    padding: 20px;
    position: relative;
    width: 36%;
}

Expected Output:

enter image description here

Could anyone throw light here? Thank you!

jsfiddle

Solution

DEMO

.timeline-panel {
    background-color:red!important;
}
.timeline > li > .timeline-panel:after {
    border-left:14px solid red!important;
    border-right: 0 solid red!important;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left:14px solid #fff!important;
    border-right-width: 14px!important;
    border-left-width: 0!important;
}

You don't need !important if you ordered your rules properly and/or modified the values accordingly, but it's there so the rule is shown at the top of the page.