CSS3 Speechbubble与图像-Java 学习之路

嗨，我正试图通过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

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/

回复于 2024-04-28T01:19:18+08:00

CSS3 Speechbubble与图像

1 回答

相关问题