如何在我的div上放置一个三角形，使其看起来像一个讲话泡泡？

Question

我为评论部分创建了一个简单的div。

我想通过在左边有一个三角形或任何其他效果使它看起来像左边的讲话气泡来给它讲话气泡的外观。

如何在不使用图像的情况下实现这一目标？

图片

HTML

<div class='comment'></div>

CSS

.comment {
    margin-left: 10px;
    height: 80px;
    display: inline-block;
    color: white;
    width: 400px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
}

Answer 1

试试这个

.comment {
    margin-left: 10px;
    height: 80px;
    display: inline-block;
    color: white;
    width: 400px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    background-color: #fff;
    border:1px solid #000;
}
.comment::before{
  content:"";
  position: absolute;
  top:20px;
  left:-12px;
  margin:auto;
  height: 20px;
  width: 20px;
  border:1px solid #fff;
  transform:rotate(45deg);
  background-color: #fff;
  border-bottom:1px solid #000;
  border-left:1px solid #000;
}

<div class='comment'></div>

相应的风格，

希望这会有所帮助...

Answer 2

我希望能帮到你：

＆＃13;

＆＃13;

.comment {
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
  height: 50px;
  display: inline-block;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  background: skyblue;
  color: #FFF;
}

.comment:before, .comment:after  {
  content: '';
  border-radius: 100%;
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: -1;
}

.comment:after {
  background-color: #fff;
  bottom: -30px;
  left: 55px;
}

.comment:before {
  background-color: skyblue;
  bottom: -20px;
  left: 70px;
}

＆＃13;

<div class='comment'>Hello,World!</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我最喜欢尼古拉斯·加拉格尔的作品，见demo page。

这是his page的解除，而不是我自己的工作。

＆＃13;

＆＃13;

<style>
/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background:linear-gradient(#f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}
</style>

<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>

＆＃13;

＆＃13;

＆＃13;