html - 带图像的 CSS3 Speechbubble

Question

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

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

.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/

但该示例没有响应，并且边缘的捏合不尖锐/尖锐。 如何在不出现这些错误的情况下捏住左侧？

speechbubble re-sizing window speechbubble mobile window

Answer 1

这是 flex 的捏尖 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/