上下左右の吹き出し

上

HTML

<div class="tooltips_top">TOP TOP TOP</div>

CSS

.tooltips_top {
  position: relative;
  display: inline-block;
  background: #000000;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
  margin: 50px;
}

.tooltips_top::before {
  content: "";
  /* 三角形 */
  border-color: #000000 transparent transparent transparent;
  border-width: 20px 10px 0 15px;
  border-style: solid;
  /* 位置 */
  position: absolute;
  top: 100%;
  left: 70%;
  transform: translateX(-50%);
}

結果

TOP TOP TOP

下

HTML

<div class="tooltips_bottom">BOTTOM BOTTOM</div>

CSS

.tooltips_bottom {
  position: relative;
  display: inline-block;
  background: #000000;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
  margin: 50px;
}

.tooltips_bottom::before {
  content: "";
  /* 三角形 */
  border-color: transparent transparent #000000 transparent;
  border-width: 0 15px 20px 10px;
  border-style: solid;
  /* 位置 */
  position: absolute;
  bottom: 100%;
  left: 30%;
  transform: translateX(-50%);
}

結果

BOTTOM BOTTOM

左

HTML

<div class="tooltips_left">LEFT LEFT</div>

CSS

.tooltips_left {
  position: relative;
  display: inline-block;
  background: #000000;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
  margin: 50px;
}

.tooltips_left::before {
  content: "";
  /* 三角形 */
  border-color: transparent transparent transparent #000000;
  border-width: 10px 0 5px 30px;
  border-style: solid;
  /* 位置 */
  position: absolute;
  top: 60%;
  left: 97%;
  transform: translateY(-50%);
}

結果

LEFT LEFT

右

HTML

<div class="tooltips_right">RIGHT RIGHT</div>

CSS

.tooltips_right {
  position: relative;
  display: inline-block;
  background: #000000;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
  margin: 50px;
}

.tooltips_right::before {
  content: "";
  /* 三角形 */
  border-color: transparent #000000 transparent transparent;
  border-width: 10px 20px 5px 0;
  border-style: solid;
  /* 位置 */
  position: absolute;
  bottom: 20%;
  right: 97%;
  transform: translateY(-50%);
}

結果

RIGHT RIGHT

最後に

特にありません。