css fukidashi2

<style>
  /* for bottom */
.fukidashi{
  display: inline-block;
  font-size:12pt;
  padding: 5pt;
  background: #fff;
  border: 1px solid gray;
  border-radius: 3%;
}
.fukidashi::before{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 20px;
  width: 0;
  height: 0;
  border-top: 30px solid gray;
  border-left: 16px solid transparent;
  transform-origin: left top;
  transform: skewX(-40deg);
}
.fukidashi::after{
  content: "";
  position: absolute;
  bottom: -26px;
  left: 22px;
  width: 0px;
  height: 0px;
  border-top: 30px solid white;
  border-left: 16px solid transparent;
  transform-origin: left top;
  transform: skewX(-40deg);
}
  /* for left */
  .fukidashiL{
    font-size:12pt;
    padding: 5pt;
    background: #fff;
    border: 1px solid gray;
    border-radius: 3%;
    z-index:5;
  }
  .fukidashiL::before{
    content: "";
    position: absolute;
    top: 2pt;
    left: -40pt;
    width: 0;
    height: 0;
    border-right: 40pt solid gray;
    border-top: 18pt solid transparent;
    transform-origin: left top;
    transform: skewY(10deg);
  }
  .fukidashiL::after{
    content: "";
    position: absolute;
    top: 3.5pt;
    left: -39pt;
    width: 0;
    height: 0;
    border-right: 40pt solid white;
    border-top: 16pt solid transparent;
    transform-origin: left top;
    transform: skewY(10deg);
  }
</style>
<div style="position:relative;width:100%;height:280pt;">
  <div class="fukidashi" style="position: absolute; left:20pt;top:30pt;width:100pt;height:40pt;">
    下に向かって
  </div>
  <div class="fukidashiL" style="position:absolute;left:200pt;top:30pt ;width:100pt;height:40pt;">
    左に向かって
  </div>
</div>

【CSS】【実例動作付き】最低限のコードのCSSだけで作る吹き出しの表示【覚書】 | SCAITY(スケイティー)

http://edutainment-fun.com/hidemaru/it/css%E3%81%A0%E3%81%91%E3%81%A7%E4%BD%9C%E3%82%8B%E5%90%B9%E3%81%8D%E5%87%BA%E3%81%97%E3%81%AE%E3%82%B3%E3%82%A2%E3%81%AA%E9%83%A8%E5%88%86%E3%80%90%E8%A6%9A%E6%9B%B8%E3%80%91_2280.html