Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Two shapes in one element?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #46499
    JohnSmith
    Member

    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.pnghttp://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/CevIhhttp://codepen.io/anon/pen/CevIh”)

    Please help.

    #143436
    JohnSmith
    Member

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

    #143490
    JohnSmith
    Member

    You sir are a genius. Thank you!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.