Grow your CSS skills. Land your dream job.

Two shapes in one element?

  • # July 17, 2013 at 9:20 pm

    What I’m attempting to do is have two shapes apart of a single element (the triangle that creates the speech bubble is one of the shapes and the circle is another).

    I’m trying to recreate this: [http://i.imgur.com/46DlQBd.png](http://i.imgur.com/46DlQBd.png “http://i.imgur.com/46DlQBd.png”)

    I’ve got the speech bubble finished, but I don’t know how to position the blue dot exactly 50% of the height of the speech bubble (**the speech bubble can vary in height**) and 10px to the left of it. It must be positioned absolutely so that the blue dot can be placed anywhere on the page.

    Here’s the CodePen I’ve created for it so far: [http://codepen.io/anon/pen/CevIh](http://codepen.io/anon/pen/CevIh “http://codepen.io/anon/pen/CevIh”)

    Please help.

    # July 17, 2013 at 9:34 pm

    Assume that this is your tooltip arrow. Set the top position at 50%, then lift back as high as the border width:

    .tooltip:before {
    content:"";
    display:block;
    border:10px solid transparent;
    position:absolute;
    right:100%;
    top:50%; /* 50% height */
    margin-top:-10px; /* negative of border width */
    border-right-color:black;
    }

    The same trick can be applied to the circle, but with a negative margin of half height. Make sure you put the circle inside the tooltip ⇒ http://codepen.io/tovic/pen/kbFht

    # July 17, 2013 at 9:51 pm

    How would I keep the border around the speech bubble/arrow since you’re using a solid black color without any border?

    # July 17, 2013 at 11:20 pm

    Ah OK. Just stack the pseudo elements `:before` and `:after` where the first arrow has a dark border color and the other one has a light border color covering on the dark arrow to create fake diagonal border effect. Extra markup for the circle:

    .tooltip {
    position:relative;
    border:1px solid black;
    background-color:gold;
    padding:10px;
    width:200px;
    color:black;
    border-radius:5px;
    margin:0 0 10px;
    }

    /* TOOLTIP ARROW */
    .tooltip:before,
    .tooltip:after {
    content:"";
    display:block;
    position:absolute;
    border:10px solid transparent;
    top:50%; /* 50% height */
    left:100%;
    margin-top:-10px; /* negative of border width */
    border-left-color:inherit;
    }

    .tooltip:after {
    border-width:9px; /* the second border should be smaller than the first one to show the dark border color below */
    margin-top:-9px;
    border-left-color:gold; /* same with background color */
    }

    /* TOOLTIP DOTS */
    .circle {
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    background-color:darkblue;
    border-radius:10px;
    top:50%; /* 50% height */
    left:100%;
    margin-left:20px;
    margin-top:-10px; /* half of the dot height */
    }

    http://codepen.io/tovic/pen/EzAtL

    # July 18, 2013 at 12:18 am

    You sir are a genius. Thank you!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".