CSSで吹き出し

自分用にメモ

参考にさせていただいたのは
Tech2GOさん。
https://blog.codecamp.jp/css_balloon

div.box {
  margin:16px;
}
/* 吹き出し本体 - 枠線付きの吹き出し */
.balloon-1{
  position: relative;
  padding: 20px;
  background-color: #ffadad;
  border: 2px solid #ca8888;
  border-radius: 10px;         /* 角丸を指定 */
  display: inline-block;       /* 横幅を自動で変更 */
}
/* 三角アイコン - 枠線付きの吹き出し */
.balloon-1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #ca8888;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon-1::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffadad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="balloon.css">
  </head>
<body>
  <div class="box">
    <p>
      <div class="balloon-1">
        CSSだけで吹き出しをつくる
        <br>文字数に合わせて横幅を自動で変更
      </div>
    </p>
    <p>
      <div class="balloon-1">
        CSSだけで吹き出しをつくる
        <br>文字数に合わせて横幅を自動で変更
      </div>
    </p>
  </div>
</body>
</html>

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル