今回は、吹き出しデザインをCSSで作る方法を紹介したいと思います! 最初に、ベースとなるコードを紹介した後、簡単なカスタムパターンをいくつか紹介していきたいと思います。 目次 ベースコード 使い方 カスタムパターン 吹き出しの色を変えてみる! 吹き出しの方向を変更してみる! 角丸表示にしてみる! 影付きの吹き出しを表示してみる! まとめ ベースコード 吹き出しデザインは以下のようなCSSで、実現することができます。 .speech-bubble { position: relative; display: inline-block; margin-bottom: 13px; padding: 1rem 1rem; min-width: 60px; max-width: 20rem; color: #929292; font-size: 16px; background: #d5f1a9;
![【CSS】吹き出しデザインをCSSで作ってみる! - Tech.log](https://cdn-ak-scissors.b.st-hatena.com/image/square/7dfe1a33700b6f05c28e17a2763e169b234bfb30/height=288;version=1;width=512/https%3A%2F%2Fi.gyazo.com%2F6eb5d363c5d819dafab400387549beb6.png)