How To Place A Triangle On My Div To Make It Look Like A Speech Bubble?

I created a simple div for my comments section. I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it lo

Solution 1:

Try this

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

<divclass='comment'></div>

style accordingly,

hope this helps...

Solution 2:

I hope to help you:

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

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

Solution 3:

I like Nicholas Gallagher's work best, see his demo page.

This is lifted off his page and is not my own work.

<style>/* Bubble with an isoceles triangle
------------------------------------------ */.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em03em;
  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: 15px15px0;
  border-style: solid;
  border-color: #f3961c transparent;
}
</style><pclass="triangle-isosceles">This is a quote. Hello world. text goes here.</p>