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”)