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.
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:
border-width:9px; /* the second border should be smaller than the first one to show the dark border color below */
border-left-color:gold; /* same with background color */