Question

嗨，我正在尝试通过Nicolas Gallagher http://nicolasgallagher.com/pure-css-speech-bubbles/demo/的示例来制作一个带有顶部图像的响应性气泡。

但是由于我已将语音气泡中的捏紧部分更改为气泡/文本框的左下部分，所以响应部分出现了问题。

   city         Hotel    min_price rank  percentcheaper
   --------------------------------------------------------------------------

       Long Beach       Motel 8     65  1   38.0952380952380952380952380952380952381
       Poway            Elks Oaks   70  1   30
       San Diego        Motel 6     55  1   0
       San diego        Days Inn    85  1   26.08695652173913043478260869565217391304

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

但是该示例没有响应，并且捏合边缘不清晰/尖锐。我该如何在左侧捏住这些错误？

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语音气泡与图像

1 个答案: