css triangles missing the tip - html

Question

The left arrows displayed next to each carousel block div are missing the tip, unsure what else in the css is required to make it a complete triangle.
Live URL: http://bit.ly/1e5wZWQ (next to the large image. the information carousel)
HTML
<ul id="index-controls">
<li><div id="one" class="active indexcarouselcontrol">FREE DISC Profile</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
<li><div id="two" class="indexcarouselcontrol">Last Minute Availability</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
<li><div id="three" class="indexcarouselcontrol">Bespoke Training</div>
<ul>
<li><h2>Training that fits like a glove</h2></li>
<li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
</ul>
</li>
</ul>
CSS
#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #47839C; color: #fff; font-size: 1.1em; }
#index-controls div:before {
content: ' ';
position: absolute;
top: 100%;
left: -45px;
position: relative;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #47839C;
}

Answer 1

The :before pseudo element give position:absolute and the parent of :before #index-controls div give position:relative and set top and left value as your need
try this:
#index-controls div {
display: block;
background-color: #222424;
font-weight: bold;
margin: 0px;
position: relative;
cursor: pointer;
padding: 19px 20px 20px 20px;
border-bottom: 1px solid #47839C;
color: #fff;
font-size: 1.1em;
}
#index-controls .active:before {
content: ' ';
position: absolute;
top: 0px;
left: -25px;
width: 0px;
height: 0px;
border-top: 19px solid transparent;
border-bottom: 20px solid transparent;
border-right: 25px solid #47839C;
}

Answer 2

Notice in your CSS you are overriding the absolute position with a relative position declaration.
The :before pseudo-element should be positioned absolutely to the relatively positioned div.
Then the CSS should be amended to:
media="screen"
#index-controls .active:before {
content: ' ';
position: absolute;
top: 0%;
left: -27px;
width: -0px;
height: 0px;
border-top: 27px solid transparent;
border-bottom: 27px solid transparent;
border-right: 27px solid #47839C;
}
The 27px is required because the div height is 54px (incluing padding).

Answer 3

Change font-size to 0em. See below:
#index-controls div {
display: block;
background-color: #222424;
font-weight: bold;
margin: 0px;
cursor: pointer;
padding: 19px 20px 20px 20px;
border-bottom: 1px solid #47839C;
color: #fff;
font-size: 0em;
}