CSS3箭頭沒有顯示

Question

我想創建一個箭頭在其右中心的框。到目前爲止，我有以下代碼，但它沒有顯示和想法？

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

你應該看看css3arrowsplease

Answer 2

以下應爲你工作：

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

看看下面的博客文章來理解它是如何工作的：http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/