<div class="container">
<p class="triangle-isosceles">This only needs one HTML element</p>
<p class="triangle-isosceles top">
  For example,<code>&lt;p&gt;[text]&lt;p&gt;</code>.
</p>
<p class="triangle-isosceles left">But it could be any element you want</p>
<blockquote class="oval-thought">
<p>This is a blockquote that is styled to look like a thought bubble</p></blockquote>
<blockquote class="oval-quotes">
        <p>No, Donny, these men are nihilists, there’s nothing to be afraid of.</p>
      </blockquote>
<p>Walter Sobchak</p>
<blockquote class="rectangle-speech-border">
        <p>This is a blockquote that is styled to look like a speech bubble</p>
      </blockquote>
<blockquote class="oval-thought-border">
        <p>This is a blockquote that is styled to look like a thought bubble</p>  
</blockquote>
</div>

body{
  background: white;
  font: 1em/1.4 Cambria, Georgia, sans-serif;
}

.container{
  width: 425px;
  margin: 0 auto;
}

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

.triangle-isosceles:after{
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50px;
  display:block;
  width:0;
  height: 0;
  
  border-top: 15px solid #f3921c;
  
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
}

.triangle-isosceles.top{
  background: linear-gradient(#f3921c, #f9d835);
}

.triangle-isosceles.top:after{
  top: -15px;
  right: 50px;
  bottom: auto;
  left: auto;
  
  border-bottom: 15px solid #f3921c;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 0;
}

.triangle-isosceles.left{
  background: #f3921c;
  margin-left: 50px;
}

.triangle-isosceles.left:after{
  top: auto;
  right: auto;
  bottom: 15px;
  left: -55px;
  
  border-bottom: 10px solid transparent;
  border-left: 0;
  border-right: 55px solid #f3921c;
  border-top: 10px solid transparent;
}

.oval-thought{
  position: relative;
  width: 270px;
  padding: 50px 40px;
  margin: 1em auto 80px;
  text-align: center;
  color: white;
  background: linear-gradient(#2e88c4, #075698);
  border-radius: 220px / 120px;     
}

.oval-thought:before{
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50px;
  width: 30px;
  height: 30px;
  background: #075698;
  border-radius: 30px;
}

.oval-thought:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 30px;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: #075698;
}

.oval-quotes{
  position: relative;
  width: 400px;
  height: 350px;
  margin: 2em auto 10px;
  color: black;
  background: #ffed26;
  border-radius: 400px / 350px;
}

.oval-quotes:before{
  content: "\201C";
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  font: 80px/1 Georgia, serif;
  color: #ffed26;
}

.oval-quotes:after{
  content: "\201D";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 20px;
  font: 80px/0.25 Georgia, serif;
  color: #ffed26;
}

.oval-quotes p{
  width: 250px;
  height: 250px;
  padding: 50px 0 0;
  margin: 0 auto;
  text-align: center;
  font-size: 35px;
}

.oval-quotes p:before{
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -30px;
  right: 55%;
  width: 180px;
  height: 60px;
  background: white;
  border-bottom-right-radius: 40px 50px;
  -webkit-transform: translate(-30px, -2px);
}

.oval-quotes p:after{
  content: "";
  position: absolute;
  z-index: -2;
  bottom: -30px;
  right: 25%;
  height: 80px;
  border-right: 200px solid #ffed26;
  background: #ffed26;
  border-bottom-right-radius: 200px 100px;
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
  display: block;
  width: 0;
}

.oval-quotes + p{
  position: relative;
  width: 150px;
  margin: 0 0 2em;
  font-size: 18px;
  font-weight: bold;
}

.rectangle-speech-border{
  position: relative;
  padding: 50px 15px;
  margin: 1em 0 3em;
  border: 10px solid #5a8f00;
  text-align: center;
  border-radius: 20px;
}

.rectangle-speech-border:before{
  content:"";
  position: absolute;
  z-index: 10;
  bottom: -40px;
  left: 50px;
  width: 50px;
  height: 30px;
  border-style: solid;
  border-color: #5a8f00;
  border-width: 0 10px 10px 0;
  background: transparent;
  display: block;
  border-bottom-right-radius: 80px 50px;
}

.rectangle-speech-border:after{
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50px;
  width: 20px;
  height: 30px;
  z-index: 10;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: #5a8f00;
  background: transparent;
  display: block;
  border-bottom-right-radius: 40px 50px;
}

.rectangle-speech-border > :first-child:before{
  content: "";
  position: absolute;
  bottom: -40px;
  left: 45px;
  width: 10px;
  height: 10px;
  background: #5a8f00;
  border-radius: 10px;
}

.rectangle-speech-border > :first-child:after{
  content: "";
  background: white;
  position: absolute;
  bottom: -10px;
  left: 76px;
  width: 24px;
  height: 15px;
}

.oval-thought-border{
  position: relative;
  padding: 70px 30px;
  margin: 1em auto 80px;
  background: white;
  border: 10px solid #c81e2b;
  text-align: center;
  border-radius: 240px / 140px;
}

.oval-thought-border:before{
  content: "";
  display: block;
  border: 10px solid #c81e2b;
  position: absolute;
  z-index: 10;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  bottom: -40px;
  right: 100px;
  background: white;  
}

.oval-thought-border:after{
  content: "";
  border: 10px solid #c81e2b;
  border-radius: 25px;
  width: 25px;
  height: 25px;
  z-index: 10;
  position: absolute;
  bottom: -60px;
  right: 50px;
  display: block;
  
}