使用箭头CSS3问题创建一个框

时间:2012-05-28 20:48:35

标签: css css3 shapes css-shapes

我正在尝试在泡泡的右侧创建一个箭头10px by 10px,但我看不到它。到目前为止,我有:

CSS:

.pageHelp{
    float:right;
    margin:10px 20px 0 0;
    width:85px;
    height:25px;
    background-color:#354E69;
    border-radius:3px;
}
.pageHelp:before{
    content:"";
    position:absolute;
    right:100%;
    top:26px;
    width:0;
    height:0;
    border-top:13px solid transparent;
    border-right:26px solid #354E69;
    border-top:13px solid transparent;
}

HTML:

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

路易斯:

.pageHelp{
    float:right;
    margin:10px 20px 0 0;
    width:85px;
    height:25px;
    background-color:#354E69;
    border-radius:3px;
    position: relative;
}
.pageHelp:after, .pageHelp:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.pageHelp:after {
    border-left-color: #354E69;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}
.pageHelp:before {
    border-left-color: ##354E69;
    border-width: 16px;
    top: 50%;
    margin-top: -16px;
}

3 个答案:

答案 0 :(得分:4)

您可以尝试使用友好的css-arrow-maker-help

答案 1 :(得分:2)

您需要指定

position: relative;

.pageHelp课程上;否则,position: absolute内容上的:before不会引用它。

您还指定了border-top两次;我认为其中一个应该是border-bottom

如果你修复了这两个,那么你至少应该能够看到div旁边的三角形。

在这里工作模型:http://jsfiddle.net/Nzazm/

答案 2 :(得分:1)

也许这可以提供帮助:http://jsfiddle.net/EkaMc/

第一件事是将position:relative添加到.pageHelp

.pageHelp{
    [...]
    position:relative;
}

这有助于将箭头相对定位到您的气泡。

然后对于你的伪元素,我建议你先使用content:" "。我试图在没有任何内容的情况下设计伪元素的运气不好,我不确定为什么。也许更有经验的用户可以帮助澄清。

.pageHelp:before{
    [...]
    content:" ";
}

设置箭头right:100%的样式会将其撞到气泡的左端。另外,如果您未设置position:relative;,您的箭头将被强制退出页面。

.pageHelp:before{
    content:" ";
    position:absolute;
    right:-23px;
    top:6px;
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-left:13px solid #354E69;
    border-bottom:7px solid transparent;
    border-right:13px solid transparent;
}​

您可以玩边框尺寸,看看哪些适合您。