Pourquoi ma flèche droite n'est pas affichée?

Question

Je suis en train de faire un simple curseur et je suis bloqué sur la partie où les flèches sont représentées, pour une raison quelconque ma flèche droite est caché derrière quelque chose que je ne sais pas:

<style> 
#thumbPlace 
{ 
    width: 424px; 
    position: relative; 
} 

#bigThumb 
{ 
    width: 340px; 
    height: 340px; 
    margin-bottom: 5px; 
    text-align: center; 
    line-height: 340px; 
} 

#thumbRect, #thumbRect > div 
{ 
    display: inline-block; 
} 

#thumbRect > div 
{ 
    position: relative; 
} 

#thumbRect 
{ 
    overflow: hidden; 
    width: 334px; 
} 

.btnArrow 
{ 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-color: transparent black transparent transparent; 
    position: absolute; 
    z-index: 1; 
} 

#btnLeftArrow 
{ 
    border-width: 32px 45px 32px 0; 
    left: 0; 
} 

#btnRightArrow 
{ 
    border-width: 32px 0 32px 45px; 
    right: 0; 
} 

.box {width: 64px;height: 64px;display:inline-block;margin:2px;} 
</style> 
<script> 
var widthBox = 68; 
function createBox(v) 
{ 
    var e = document.createElement('div'), 
     l = document.getElementById('btnLeftArrow'), 
     r = document.getElementById('btnRightArrow'); 
    e.className = 'box'; 
    e.style.backgroundColor = '#'+(function lol(m,s,c){return s[m.floor(m.random() * s.length)] + 
    (c && lol(m,s,c-1));})(Math,'ABCDEF',4); 

    v.appendChild(e); 

    console.log(v.children.length); 

    if(v.children.length >= 5) 
    { 
    if(r.style.display == 'none') r.style.display = 'inline-block'; 
    v.style.left = (-((v.children.length-5)*widthBox)) + 'px'; 
    v.style.width = v.children.length*widthBox; 
    } 

} 
</script> 
<center> 
    <h2>Photo and video gallery</h2> 
    <div id="bigThumb">No image</div> 
    <div id="thumbPlace"> 
     <div class="btnArrow" id="btnLeftArrow" style="display: none;"></div> 
    <div class="btnArrow" id="btnRightArrow" style="display: none;"></div> 
    <div id="thumbRect"> 
     <div> 
     <!-- DIVS GOES HERE --> 
     </div> 
    </div> 
    </div> 
    <input type="button" value="Add box" onclick="javascript: createBox(this.parentNode.children[2].children[2].children[0]);"> 
</center> 

http://jsfiddle.net/a562890u/embedded/result/

Comme vous pouvez le voir lorsque vous cliquez sur « Ajouter boîte », des boîtes de couleurs diférentes sont ajoutés, avec cinq boîtes mon écran flèche droite passe à « inline-block », mais je ne peux pas le voir.

Je ne sais pas où est l'erreur, donc toute aide est la bienvenue .. Merci! :)

Answer 1

vous modifiez uniquement la propriété border-width change pas la propriété border-color

changement css

#btnRightArrow { 
    border-color: transparent transparent transparent black; 
    border-width: 32px 0 32px 45px; 
    right: 0; 
} 

Answer 2

Essayez ceci dans .. css

btnRightArrow { 
    border-width: 33px 0px 28px 73px; 
    right: 0; 
    border-top: 32px solid #f6f6f6; 
    border-left: 45px solid #000000; 
    border-bottom: 32px solid #f6f6f6; 
}