CSSで描く吹き出しや矢印のバリエーション

最近吹き出しを使いことがあり、いくつか試しに作ったものがあったので紹介します!
今回は全て、borderを使わずに:before :afterで四角や丸を重ねて表現しています。

まず、丸い吹き出しにしっぽが生えたような吹き出しです。
これはすべて丸を使って作られています。

tc-1-img1
– CSS –

#balloon-1 {
position: relative;
display: inline-block;
padding: 0 20px;
width: auto;
height: 70px;
background: #2c5c9c;
border-radius: 60%;
color: #fff;
line-height: 70px;
}
#balloon-1:before {
content: "";
position: absolute;
bottom: -10px;
right: 20px;
display: block;
width: 30px;
height: 30px;
background: #2c5c9c;
border-radius: 30px 0 30px 0;
z-index: -1;
}
#balloon-1:after {
content: "";
position: absolute;
bottom: -5px;
right: 30px;

display: block;
width: 30px;
height: 30px;
background: #ffffff;
border-radius: 30px 0 30px 0;
z-index: -1;

transform: rotate(-30deg);
}
次が、角丸の四角に丸を組み合わせた吹き出しです。
何かを考えているような表現に使えそうだなと思いました。

tc-1-img2
– CSS –

#balloon-2 {
position: relative;
display: inline-block;
padding: 0 20px;
width: auto;
height: 60px;
background: #fdb23d;
border-radius: 10px;
color: #fff;
line-height: 60px;
}
#balloon-2:before {
content: "";
position: absolute;
bottom: -7px;
right: 12px;
display: block;
width: 22px;
height: 22px;
background: #fdb23d;
border-radius: 50%;
z-index: -1;
}
#balloon-2:after {
content: "";
position: absolute;
bottom: -19px;
right: 29px;
display: block;
width: 10px;
height: 10px;
background: #fdb23d;
border-radius: 50%;

}

最後に、角丸の四角と一部だけを角丸にした四角で構成している吹き出しです。
しっぽのような部分がグイッと曲がっていて、ちょっと遊び心を加えられるような吹き出しです。
tc-1-img3

– CSS –

#balloon-3 {
position: relative;
display: inline-block;
padding: 0 20px;
width: auto;
height: 70px;
background: #3dce64;
border-radius: 10px;
color: #fff;
line-height: 70px;
}
#balloon-3:before {
content: "";
position: absolute;
bottom: 0px;
left: -14px;
display: block;
width: 30px;
height: 30px;
background: #3dce64;
border-radius: 0px 0 0px 17px;
z-index: -1;
}
#balloon-3:after {
content: "";
position: absolute;
bottom: 10px;
left: -15px;
display: block;
width: 25px;
height: 25px;
background: #ffffff;
border-radius: 0px 0 21px 12px;
z-index: -1;
}

 

 

吹き出しを画像で作ってしまうと、色や大きさの変更が面倒ですが、CSSで作ってしまえば後からの変更も簡単でらくちんだなぁ~と思います。
吹き出しとして使うもよし、装飾として使ってもいいと思います。

 

以上、遠藤でした!