パーツ番号 02-04-11 ・ CSSのみ

吹き出し型引用(スピーチバブル)

三角形の尻尾を持つ吹き出し形状の引用ブロック。対話形式のコンテンツやチャット風UIの発言表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="d02-04-11-quote">
          <span class="d02-04-11-text">丸みのある吹き出し形状が、会話の一部を切り取ったような親しみやすさを演出します。</span>
          <span class="d02-04-11-tail"></span>
        </blockquote>

CSS

.d02-04-11-quote{
          position:relative;
          margin:0 0 12px;
          padding:16px 18px;
          background:#eef3fc;
          border-radius:16px;
          font-size:14px;
          line-height:1.8;
          color:#243b5c;
        }
        .d02-04-11-text{display:block;}
        .d02-04-11-tail{
          position:absolute;
          left:28px;
          bottom:-10px;
          width:20px;
          height:20px;
          background:#eef3fc;
          clip-path:polygon(0 0,100% 0,0 100%);
        }

クラス名 .d02-04-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。