CSS3 Flèche ne montrant pas

Question

J'essaie de créer une boîte avec une flèche sur son centre droit. Jusqu'à présent, j'ai le code suivant, mais il ne montre pas et des idées?

CSS:

.pageHelp{ 
    float:right; 
    margin:10px 20px 0 0; 
    width:85px; 
    height:25px; 
    border-radius:3px; 
    background-color:#354E69; 
} 
.pageHelp p{ 
    color:#000; 
    padding:5px; 
    text-align:center; 
} 
.pageHelp .arrow{ 
    width:0; 
    height:0; 
    border-top:3px solid transparent; 
    border-bottom:3px solid transparent; 
    border-left:3px solid #354E69; 
} 

HTML:

<div class="pageHelp arrow"><p>In Page Help</p></div> 

Answer 1

Vous devriez vérifier css3arrowsplease

Answer 2

Ce qui suit devrait fonctionner pour vous:

CSS:

.pageHelp{ 
    float:right; 
    margin:10px 20px 0 0; 
    width:85px; 
    height:50px; 
    border-radius:3px; 
    background-color:#354E69; 
    position:relative; 
} 

.pageHelp p{ 
    color:#000; 
    padding:5px; 
    text-align:center; 
} 

.pageHelp:after { 
    content: ' '; 
    height: 0; 
    position: absolute; 
    left:10px; 
    width: 0; 

    border: 10px solid transparent; 
    border-left-color: #354E69; 
    left: 100%; 
    top: 50%; 
    margin-top: -10px; 
}​ 

HTML:

<div class="pageHelp"><p>In Page Help</p></div>​ 

Live Demo

Découvrez le blog ci-dessous pour comprendre comment cela fonctionne: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/