How can I add background color to CSS triangles?

Question

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:

Could anyone throw light here? Thank you!

jsfiddle

Answer 1

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.

Answer 2

The key here is the background color of the arrow. The li of items on the right side has the class .timeline-inverted, and that is what we'll use to give different CSS to the arrow pointing left.

Working JSFiddle

.timeline > li > .timeline-panel {
    background-color:green;
}
.timeline > li > .timeline-panel:before {
    border-left: 15px solid green;
}

.timeline > li > .timeline-panel:after {
    border-left: 14px solid green;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-right: 14px solid green;
}

Answer 3

Are you sure that CSS is getting used. I know that some versions of IE doesn't like/understand the parent/child operator ">"

http://forums.techguy.org/web-design-development/596886-css-operator-question.html

Even Windows Explorer preview can't handle them

Change it to:

.timeline li .timeline-panel { ... }

and see if it is used.