嘿,我创建了这个小语音气泡工具提示,箭头位于底部:
http://jsfiddle.net/QNPYQ/
.bubble:after {
border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: solid;
border-width: 26px;
bottom: -52px;
content: "";
display: block;
height: 0;
left: 4em;
position: absolute;
width: 0;
}
任何人都可以告诉我如何在<div>
顶部制作箭头?
您可以旋转箭头并根据顶部放置它
.bubble:after {
border-color: #EEEEEE rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
border-style: solid;
border-width: 26px;
top: -52px;
content: "";
display: block;
height: 0;
left: 4em;
position: absolute;
width: 0;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
一个例子:http://jsfiddle.net/QNPYQ/1/
http://jsfiddle.net/a2ZFF/
您需要更改边框颜色以将箭头指向另一个方向,并且渲染边框 :before 而不是 :after 也是有意义的(尽管这不是绝对必要的)。
.bubble:before {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #EEEEEE;
border-style: solid;
border-width: 26px;
content: "";
top:-53px;
display: block;
height: 0;
left: 4em;
position: absolute;
width: 0;
}
为了使整个事情适合,你需要为整个东西添加一个上边距,或者一些类似的调整。