CSS triangles missing

Question

The left arrows displayed next to each carousel div block skip the tip, not knowing what else in css is required to make it a complete triangle.

Live URL: http://bit.ly/1e5wZWQ (next to the large image. 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

: before the pseudo-element, set the position: absolute and the parent element: before #index-controls divspecify the position: relative and set upper and left values ​​according to your needs

try the following:

#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

, CSS .

:before div.

CSS :

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;
}

27px, div 54px ( ).

Answer 3

Change the 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;
}