CSS модификация для размещения указателя - PullRequest
Новая
       14

CSS модификация для размещения указателя

0 голосов
/ 24 февраля 2012

У меня есть подсказка CSS на моем HTML. Я получаю стрелку (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 after

Переставить как на картинке ниже

To be rearranged like this

Ответы [ 2 ]

3 голосов
/ 24 февраля 2012

Проверьте этот jsFiddle . Все, что вам нужно сделать, это изменить абсолютное положение элемента ::after и переключить границу, у которой есть цвет, с этого: 

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

К этому: 

border-color: transparent transparent transparent blue;
bottom:25%;
right:-19px;
3 голосов
/ 24 февраля 2012

Это поможет, 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; */
}
...