CSSで吹き出しを作れるんだけれど、よく忘れるから、メモ。
hukidasi.html
<!doctype html>
<heml lang="ja">
<head>
<meta charset="utf-8">
<title>吹き出し</title>
<link rel="stylesheet" href="hukidasi.css">
</head>
<body>
<div id="wrap">
<h1>ふきだし</h1>
<div class="left">こんにちは</div>
<div class="right">まいど</div>
</div>
</body>
</html>hukidasi.css
@charset "utf-8";
body {
background-color: pink;
}
#wrap {
background-color: #fff;
width: 400px;
margin: 0 auto;
height: 600px;
}
.left,
.right {
margin: 20px;
width: 300px;
height: 100px;
border: solid 1px #555;
position: relative;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
.left {
background-color: #ddd;
}
.right {
float: right;
background-color: #58fc68;
}
.left::before,
.left::after,
.right::before,
.right::after {
content: "";
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
position: absolute;
bottom: 20px;
}
.left::before {
content: "";
border-right: 13px solid #555;
left: -14px;
}
.left::after {
content: "";
border-right: 12px solid #ddd;
left: -12px;
}
.right::before {
border-left: 13px solid #ddd;
right: -14px;
}
.right::after {
border-left: 12px solid #58fc68;
right: -12px;
}
こんな感じ。
