0

右中央に矢印のあるボックスを作成しようとしています。これまでのところ、次のコードがありますが、表示されず、アイデアはありませんか?

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>
4

2 に答える 2

5

css3arrowspleaseをチェックしてください

于 2012-06-01T02:14:03.157 に答える
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>​

ライブデモ

これがどのように機能するかを理解するには、次のブログ投稿を確認してください。http ://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

于 2012-06-01T02:09:16.837 に答える