CSS 修改以排列指针

发布于 2025-01-08 19:03:51 字数 1169 浏览 1 评论 0原文

我的 html 上有一个 css 工具提示。我在气泡底部看到箭头标记(bubble:after)。如何重新排列到气泡的右中心？

这是我的 div

 <div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>

我的 div 上显示的气泡来自下面的 css

 <style type="text/css">
 .bubble {
 position: relative;
 background-color:#eee;
 margin: 0;
 padding:10px;
 text-align:center;
 width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
.bubble:after {    //This after mark has to be arranged so to point to the right of bubble
position: absolute;  //The position should be at the center
display: block;
content: "";  
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
 }

Bubble with bubble

如下图所示重新排列

像这样重新排列

原文

I have a css tooltip on my html. I get the arrow mark(bubble:after) at the bottom of my bubble. How can I re-arrange to right center of my bubble?

Here is my div

 <div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>

The bubble which is displayed on my div is from the css below

 <style type="text/css">
 .bubble {
 position: relative;
 background-color:#eee;
 margin: 0;
 padding:10px;
 text-align:center;
 width:180px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
.bubble:after {    //This after mark has to be arranged so to point to the right of bubble
position: absolute;  //The position should be at the center
display: block;
content: "";  
border-color: #eee transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:1em;
 }

Bubble with bubble after

Rearrange like below image

To be rearranged like this

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情绪 2025-01-15 19:03:51

看看这个jsFiddle。您需要做的就是更改 ::after 元素的绝对定位，并切换边框的颜色，从：

border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;

到：

border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;

Check out this jsFiddle. All you need to do is change the absolute positioning of the ::after element, and switch which border has a colour, from this:

border-color: blue transparent transparent transparent;
bottom:-19px;
left:1em;

To this:

border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;

回复收藏 0 原文

温柔戏命师 2025-01-15 19:03:51

这样就可以了，http://jsfiddle.net/elclanrs/hu38A/1

.bubble:after {
    content: "";
    position: absolute;
    border-color: transparent transparent transparent red;
    border-style: solid;
    border-width: 10px;
    height: 0;
    width: 0;
    top: 50%;
    margin-top: -10px; /* border-width */
    right: -20px; /* border-width*2; */
}

This will do the trick, http://jsfiddle.net/elclanrs/hu38A/1

.bubble:after {
    content: "";
    position: absolute;
    border-color: transparent transparent transparent red;
    border-style: solid;
    border-width: 10px;
    height: 0;
    width: 0;
    top: 50%;
    margin-top: -10px; /* border-width */
    right: -20px; /* border-width*2; */
}

回复收藏 0 原文

~没有更多了~