CSS3 带图片的对话泡泡

Question

你好，我正在尝试制作一个响应式对话泡泡，上面有 Nicolas Gallagher http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ 示例中的图像。

但响应部分出现问题，因为我已将语音气泡中的收缩部分更改为 bubble/text 框的左下部分。

.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;
}

我在这里做了一个例子： https://jsfiddle.net/g5k07rL9/

但是这个例子没有响应，而且边缘没有 sharp/pointy 捏合。如何在不出现这些错误的情况下在左侧进行捏合？

speechbubble re-sizing window speechbubble mobile window

Answer 1

这是弯曲的捏尖 css 气泡。

* {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>

预览时间：https://jsfiddle.net/itsselvam/fuxm42sj/

CSS3 带图片的对话泡泡

CSS3 Speechbubble with image

html

css

html5-canvas

responsive