我正在尝试在泡泡的右侧创建一个箭头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;
}
答案 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;
}
您可以玩边框尺寸,看看哪些适合您。