【初心者でもわかる】border付き下向きの吹き出しを作る方法

どうも7noteです。枠線付きの吹き出しの作り方。

四角形を２つ使って吹き出しを作ります。
微調整しながら作らなければ、うまく線がつながらないので注意しましょう。

完成イメージ

border付き吹き出しの作り方

index.html

<p><span class="fukidashi">ふきだしのテキスト</span></p>

style.css

.fukidashi {
  color: #333;           /* 文字色をグレーに指定 */
  text-align: center;    /* 文字を中央寄せにする */
  min-width: 200px;      /* 長くなっても大丈夫なようにmin-widthで横幅指定 */
  background: #FFF;      /* 背景色を指定 */
  border: 1px solid #666;/* 枠線をつける */
  padding: 8px;          /* 適度な余白 */
  display: inline-block; /* widthを効かせるために指定 */
  position: relative;    /* 基準値とする */
}

.fukidashi::after {
  content: '';           /* 疑似要素に必須 */
  position: absolute;    /* 相対位置に指定 */
  bottom: 0;             /* 下から0pxの位置に指定。 */
  left: 50%;             /* 左から50%の位置に指定 */
  width: 10px;           /* 四角形の横幅を指定 */
  height: 10px;          /* 四角形の高さを指定 */
  background: #FFF;      /* 背景色を指定 */
  border-right: 1px solid #666; /* 右側にborder */
  border-bottom: 1px solid #666;/* 下側にborder */
  transform: translate(-50%,55%) rotate(45deg); /* 表示位置を左方向に半分戻し、下方向に移動。かつ45度時計回りに回転 */
  transform-origin:center center; /* 回転の基準位置を中心に指定 */
}

解説

三角（▼）部分は四角形の線を右と下にだけつけて、45度回転させることで下向きの三角に見せています。
本来後ろに見えている線は、afterに背景色（白）を入れて、見えなくしています。

spanにだけ色をつけるとこんなかんじ。

そのため、もしafterと文字がかぶってしまうと文字が見えなくなったり、背景色が違うとこのように浮いてしまうのでそのあたりは作成時に注意が必要です。

またtranslateの値を微調整しなければ、うまく三角部分が繋がって見えないので、三角の大きさに合わせて微調整を行えばきれいに見せることができます。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ