CSS3 Speechbubble with image - html

Question

Hi i'm trying to make a responsive speech bubble with an image on top from the examples of Nicolas Gallagher http://nicolasgallagher.com/pure-css-speech-bubbles/demo/.
But getting problems with the responsive part because i have changed the pinched part in the speechbubble to be in the bottom-left part of the bubble/text box.
.pinched > :first-child:before {
content: "";
position: absolute;
bottom: -20px;
right: 0;
width: 70%;
height: 20px;
background:#fff;
/* css3 */
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
}
I have made an example here:
https://jsfiddle.net/g5k07rL9/
But the example isn't responsive and the pinch not sharp/pointy in the edge.
How do i get the pinch in the left side without getting these bugs?
speechbubble re-sizing window
speechbubble mobile window

Answer 1

Here is the curvy pinched tip css bubble.
* {font-family: arial;}
.bubble {
padding: 1.5em;
background: #CCC;
border: 2px solid #999;
border-radius: 1em;
width: 60%
}
.bubble:after {
top: 42px;
left: 10px;
position: relative;
font-size: 50px;
line-height: 0;
color: #ccc;
}
.circle {
border-radius: 50%;
background: #ccc;
width: 70px;
height: 70px;
position: relative;
left: 15px;
border: 2px solid #999;
}
.pinch {
background: #999;
height: 15px;
width: 100px;
}
.pinch span {
background: #FFF;
display: inline-block;
width: 50px;
height: 15px;
}
.lft {border-top-right-radius: 15px}
.rgt {border-top-left-radius: 15px;}
<div class="bubble">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
<div class="pinch"><span class="lft"></span><span class="rgt"></span> </div>
<div class="circle">
</div>
Preview at : https://jsfiddle.net/itsselvam/fuxm42sj/