はじめに
こんにちは！@70days_jsです。
cssで吹き出しを作ってみました。
今日は38日目。(2019/11/25)
よろしくお願いします。
サイトURL
やったこと
こんな感じの吹き出しを作りました。↓
コピペで繰り返し使えるように作りました。↓
<body>
<div class="wrapper">
<img class="image" src="pic.png" alt="画像">
<div class="fukidashi">吹き出しがあると、ポップに見えるよね</div>
</div>
<div class="wrapper2">
<div class="fukidashi2">そうだね</div>
<img class="image2" src="pic.png" alt="画像">
</div>
<div class="wrapper">
<img class="image" src="pic.png" alt="画像">
<div class="fukidashi">うん。</div>
</div>
</body>
.wrapperクラスが左側に配置される方です。
.wrapper2クラスは右側に配置されます。
違いは、つけているクラスと、divとimgの順番だけです。
吹き出しの作り方。↓
.fukidashi {
width: 200px;
margin-left: 10px;
position: relative;
display: inline-block;
text-align: center;
color:#FFF;
padding: 30px;
background-color:black;
border-radius: 50%;
z-index: 0;
}
.fukidashi::before {
top: 50%;
left: -5px;
margin-top: -10px;
content: '';
position: absolute;
display: block;
z-index: 1;
border-style: solid;
border-color: transparent black;
border-width: 10px 10px 10px 0px;
}
absoluteとrelativeを使って実現します。
吹き出しの三角形部分はborrderのプロパティを変えることで実現しています。
吹き出しの本体はradiusでちょっと丸めるだけです。
あとは位置関係を相対的にずらして、三角形を見える部分に持ってくるだけです。
感想
サイトを作る際に、吹き出しがあるとポップな感じになるので前々からやりたいと思っていました。できてよかったです。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- 実際に書いてみる！CSSで吹き出しを作る方法【初心者向け】 | TechAcademyマガジン (https://techacademy.jp/magazine/12936)
とても分かりやすかったです。ありがとうございます！