こんにちは、はやちです。 今回はcss3を使って簡単に作れる吹き出しを紹介したいと思います。 HTML 土台はこんな感じ <div id="textarea"> <div class="textinner"> <p>css3</p> </div> <!--/textinner--> <div class="triangle"></div> </div> <!--/textarea--> textinnerがボックス部分でtriangleが矢印部分になります。 ボックスを作る グラデーションの調整をcss上でやるのは面倒なので、ジェネレーターでちょちょいっとつくっちゃいます。 今回使用したジェネレーターはこちら □Grad3 http://grad3.ecoloniq.jp/ ブラウザ上でグラデーションとシャドーを細かく指定できるのですごく便利です^^ 自動生成されたソースをはっつけます。
![画像を一切使わずに、CSS3だけでスタイリッシュな吹き出しをつくろう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/d928b97b22ba94d0f2b9869e7b6c0e52d973969d/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2012%2F04%2Ftop31.jpg)