Set background on pseudo element created arrow - html

Question

I have a bunch of div content boxes. I also used pseudo before and after selectors to create arrows for each box. Now I have put background colors for the content boxes. I want to put the respective background color Inside the arrows also.
I tried this but it it creates the background color outside the arrows not inside:
.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: blue;}

Answer 1

You're going about making the arrows a strange way.
This is the most common method.
.content {
width: 50%;
height: 100px;
background: orange;
margin: 10px auto;
position: relative;
}
.content:before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid transparent;
top: 10px;
}
.left:before {
right: 100%;
border-right-color: orange;
}
.right:before {
left: 100%;
border-left-color: orange;
}
<div class="content left">
</div>
<div class="content right">
</div>

Answer 2

Working solution..
HTML
<div class="container_24">
<div class="grid_24">
<section id="timeline">
<div class="content">
<div class="timeline">
<article class="post">
<div class="timeline-time">
<time>January, 2005-2010</time>
</div>
<div class="timeline-content tc-left bg-blue wow slideInLeft" id="tc1">
<h2 class="entry-title">
Title 1 Goes Here
</h2>
<div class="entry-content">
Content 1 Goes Here
</div>
</div>
</article><!-- .post -->
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2005</time>
</div>
<div class="timeline-content bg-green wow slideInRight" id="tc2">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>Content 2 Goes Here</p>
</div>
</div>
</article>
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2006</time>
</div>
<div class="timeline-content tc-left bg-red wow slideInLeft" id="tc3">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>Content 3 Goes Here</p>
</div>
</div>
</article><!-- .post -->
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2008</time>
</div>
<div class="timeline-content bg-orange wow slideInRight" id="tc4">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>
Content 4 Goes Here
</p>
</div>
</div>
</article>
<article class="post">
<div class="timeline-time">
<time>Jan 1, 2010</time>
</div>
<div class="timeline-content tc-left bg-gray wow slideInLeft" id="tc5">
<h2 class="entry-title">
Title Goes Here
</h2>
<div class="entry-content">
<p>Content 5 Goes Here</p>
</div>
</div>
</article><!-- .post -->
</div><!-- end timeline -->
</div><!-- end content -->
</section><!-- end section -->
CSS
/*************************
Timeline Styles
*************************/
.timeline {
padding: 20px 0;
position: relative;
}
.timeline:before {
background-color: #d2d2d2;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2px;
content: "";
display: block;
height: 100%;
left: 50%;
margin-left: -2px;
position: absolute;
top: 0;
width: 4px;
}
.timeline .post {
border: 0 none;
margin: 0;
padding: 0 40px 5px 0;
width: 50%;
}
.timeline .post:last-child, .timeline .post:nth-child(even):last-child {
padding-bottom: 0;
}
.timeline .post:nth-child(even) {
margin-left: 50%;
padding: 0 0 5px 40px;
}
.timeline .post:nth-child(even) .timeline-time {
left: auto;
margin: 31px 40px 0 0;
right: 50%;
text-align: right;
}
.timeline .post:nth-child(even) .timeline-content:before {
border: 15px solid transparent;
border-right-color: #ccc;
left: -30px;
right: auto;
}
.timeline .post:nth-child(even) .timeline-content:after {
border: 14px solid transparent;
left: -28px;
right: auto;
}
.timeline .post .timeline-time {
color: #999;
left: 50%;
margin: 31px 0 0 40px;
position: absolute;
}
.timeline .post .timeline-content {
border: 1px solid #ccc;
border-radius: 3px;
padding: 46px;
position: relative;
}
.timeline .post .timeline-content:before, .timeline .post .timeline-content:after {
border: 15px solid transparent;
border-left-color: #ccc;
content: "";
display: block;
position: absolute;
right: -30px;
top: 26px;
}
.timeline .post .timeline-content:after {
border: 14px solid transparent;
right: -28px;
top: 27px;
}
.tc-left {right: 40px;}
.bg-blue {background: blue;}
.bg-green {background: green;}
.bg-red {background: red;}
.bg-orange {background: orange;}
.bg-gray {background: gray;}
.timeline .post:nth-child(1n) .timeline-content.bg-blue::before, .timeline .post:nth-child(1n) .timeline-content.border-blue::before {background-color: #fff;border-left-color: blue;}
.timeline .post:nth-child(2n) .timeline-content.bg-green::before, .timeline .post:nth-child(2n) .timeline-content.border-green::before {border-color: #fff;border-right-color: green;}
.timeline .post:nth-child(3n) .timeline-content.bg-red::before, .timeline .post:nth-child(3n) .timeline-content.border-red::before {border-color: #fff;border-left-color: red;}
.timeline .post:nth-child(4n) .timeline-content.bg-orange::before, .timeline .post:nth-child(4n) .timeline-content.border-orange::before {border-color: #fff;border-right-color: orange;}
.timeline .post:nth-child(5n) .timeline-content.bg-gray::before, .timeline .post:nth-child(5n) .timeline-content.border-gray::before {border-color: #fff;border-left-color: gray;}
Check out this Fiddle too