relative css only speech bubble

Question

I am using this code to generate a css only speech bubble :-

li.selected{
            background-color: blue;
            a{
                color: white;
            }

        }

        li.selected:after{

            content: "";
            position: absolute;
            top: 33%;
            left: 390px;
            border-top: 10px solid transparent;
            // border-top-color: inherit; 
            border-left: 10px solid blue;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;

        }

While this works fine, the triangle gets left when I move to the next li item as it has got a fixed position, how do I move the triangle as well?

here is my html code :-

<ul>

              <li class='selected'>
                <a href="/users/credits">Credits</a>
              </li>
              <div class='line-separator'></div>
              <li>
                <a href="/users/edit">Change Password</a>
              </li>
              <div class='line-separator'></div>
              <li>
                <a href="#">Investor Status</a>
              </li>
            </ul>

I thought so, could you also post your HTML and clarify exactly what the problem is? :) — Kyle, Jun 28 '13 at 08:35
am not able to add images otherwise it would have illustrated my question better — Dev R, Jun 28 '13 at 08:36
Is this what you're after? http://jsfiddle.net/vJpQY/ (replace `:hover` with `.selected`) — otinanai, Jun 28 '13 at 08:53
@otinanai thanks this works perfectly please mark is as answer so that I can accept and upvote it :) too many downvotes on a simple question already — Dev R, Jun 28 '13 at 09:17
possible duplicate of [Speech bubble with arrow](http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow) — jbutler483, May 22 '15 at 15:31

score 1 · Accepted Answer · answered Jun 28 '13 at 09:24

1

Instead of using position:absolute to the arrow, you need to change it to relative position so that the arrow would position itself relatively to the .selected menu item.

See the demo here.

Note: Replace the :hover selector with the .selected class.

answered Jun 28 '13 at 09:24

otinanai

3,987
3
25
43

score -1 · Answer 2 · answered Jun 28 '13 at 08:31

you have useful this css

/* Bubble with an isoceles triangle ------------------------------------------ */

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
   content:"";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

i am showing the selected link with a triangle pointer, so i think anything which is with fixed position will not work — Dev R, Jun 28 '13 at 08:34

relative css only speech bubble

2 Answers2