気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![guest](/img/icon/icnUserSample.jpg)
回答2件
0
ベストアンサー
三角形だけ二重線にするのは案外難しい。
以下のCSSを使って、div
要素にclass="balloon"
を指定すると、こんな感じ。
補足: 三角形部分をより小さくするために、rotateとscaleYで変形させた。この変形により細く見えてしまう三角形部分のborderの太さや位置も微調整。
CSS
1.balloon { 2 position: relative; 3 height: 80px; 4 width: 400px; 5 color: black; 6 background: white; 7 border: 2px lightblue solid; 8} 9 10.balloon:before { 11 content: ""; 12 position: absolute; 13 top: 100%; 14 left: 50%; 15 margin-left: -5px; 16 height: 20px; 17 width: 20px; 18 background: inherit; 19 transform: scaleY(0.5) rotate(45deg); 20 transform-origin: top right; 21} 22 23.balloon:after { 24 content: ""; 25 position: absolute; 26 top: 100%; 27 left: 50%; 28 margin-top: 3px; 29 margin-left: -7px; 30 height: 20px; 31 width: 20px; 32 background: transparent; 33 transform: scaleY(0.5) rotate(45deg); 34 transform-origin: top right; 35 border-bottom: 8px lightblue double; 36 border-right: 8px lightblue double; 37} 38 39.balloon * { 40 text-align: center; 41}
投稿2021/01/23 15:48
編集2021/01/24 05:20総合スコア11990
0
投稿2021/01/23 15:04
総合スコア7247
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/24 04:27
2021/01/24 05:23
2021/01/24 12:57