CSS3 Shapes chat bubble

Circle symbol:

#circle{

                width: 200px;

                height: 200px;

                border-radius:50%;

                background:linear-gradient(top, #054d52 0%, #057178 100%);

               background:-webkit-linear-gradient(top, #054d52 0%,#057178 100%);

                       background: -moz-linear-gradient(top, #054d52 0%, #057178 100%);

                background: -ms-linear-gradient(top, #054d52 0%, #057178 100%);

                 background: -o-linear-gradient(top, #054d52 0%, #057178 100%);

            }

<div id="circle">

        </div>

Chat bubble symbol:

#chat-symbol{

                width: 100px;

                height: 80px;

                background:  #054d52;

                position: relative;

                border-radius:8px;

            }

            #chat-symbol:before{               

                content: "";

                position: absolute;

                left:  100%;

                top: 26px;

                border-top: 13px solid transparent;

                border-left:  26px solid #054d52;

                border-bottom: 13px solid transparent;

            }

<div id="chat-symbol">           

        </div>

---