Zenn
🦁

角の丸い吹き出しをCSSで作ってjQueryで表示・非表示を切り替える

2023/11/17に公開
CSS
HTML
JavaScript
jQuery
tech

はじめに

今回はボタンを押すと吹き出しが表示され、吹き出し以外の部分を押すと吹き出しが非表示になるように作成しました。

吹き出しが上側にある場合

吹き出しが下側にある場合

ちなみに、この部分は2つの二等辺三角形をずらして重ねることで表現しています。

共通部分

HTML

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<p id="trigger">吹き出しを表示</p>

    <div id="balloon">
        <div class="balloon-contents">
            <p>吹き出しの中に表示される文章！！！！！！！！！！！！！</p>
        </div>
    </div>

JavaScript(jQuery)

$("#balloon").has(e.target).length === 0はIDがballoonの子要素の数が0の時という意味です。

$(function() {
  $(document).on("click", function(e) {
    if ($("#trigger").is(e.target)) {
      e.stopPropagation();
      $("#balloon").toggle();
    } else if (!$("#balloon").is(e.target) && $("#balloon").has(e.target).length === 0) {
      $("#balloon").hide();
    }
  });
});

上向きCSS

#balloon {
  display: none;
}
/* 吹き出しの四角の部分 */
.balloon-contents {
  position: absolute;
  background: #fff;
  border: solid 2px #000;
  border-radius: 3px;
}

/* 二等辺三角形の共通部分 */
.balloon-contents::before,
.balloon-contents:after {
  content: "";
  position: absolute;
  left: 50%; /* 角丸の位置 */
  transform: translateX(-50%) rotate(135deg);
  border: 15px solid transparent;
  border-radius: 0 0 0 10px;
}

/* 内側の二等辺三角形 */
.balloon-contents::before {
  top: -14px;
  border-bottom-color: #fff;
  border-left-color: #fff;
  z-index: 2;
}

/* 外側の二等辺三角形 */
.balloon-contents:after {
  top: -16px;
  border-bottom-color: #000;
  border-left-color: #000;
  z-index: 1;
}

下向きCSS

#balloon{
display: none;
}

/* 吹き出しの四角の部分 */
.balloon-contents {
  position: absolute;
  background: #fff;
  border: solid 2px #000;
  border-radius: 3px;
  }
  
/* 二等辺三角形の共通部分 */
.balloon-contents::before,
.balloon-contents:after {
  content: "";
  position: absolute;
  left: 50%; /* 角丸の位置 */
  transform: translateX(-50%) rotate(-45deg);
  border: 15px solid transparent;
  border-radius: 0 0 0 10px;
}

/* 内側の二等辺三角形 */
.balloon-contents::before {
  bottom: -14px;
  border-bottom-color: #fff;
  border-left-color: #fff;
  z-index: 2;
}

/* 外側の二等辺三角形 */
.balloon-contents:after {
  bottom: -16px;
  border-bottom-color: #000;
  border-left-color: #000;
  z-index: 1;
}

二等辺三角形の部分を細くする

scaleX()を使用して幅を調整してください。

  transform: scaleX(0.5) translateX(-50%) rotate(-45deg);

比較すると細くなっているのがわかるかと思います。

修正前

参考にさせていただきました

jQuery

https://magazine.techacademy.jp/magazine/9540
https://www.task-notes.com/entry/20150112/1420994026

CSS

https://qiita.com/kenz_firespeed/items/fa265664d352fee270d5
https://zero-plus.io/media/triangle/

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉

Discussion