ミギムキ

[CSS] レスポンシブな画像と吹き出しのレイアウト

やりたいこと

サンプルコード

html

<div class="speech_balloon"> <div class="speech_balloon_image"> <img src="./images/"> </div> <div class="speech_balloon_text"> <p>だが断る</p> </div> </div>
スポンサー広告

CSS

.speech_balloon_text { position: relative; padding: 30px; margin: 30px 0px 0px; border: 1px solid #3388dd; background-color: #fff; } .speech_balloon_text:before { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 30px; height: 30px; background-color: #fff; border-top: 1px solid #3388dd; border-left: 1px solid #3388dd; content: ""; } @media print, (min-width: 992px) { .speech_balloon { display: flex; } .speech_balloon_image { width: 50%; } .speech_balloon_text { width: calc(50% - 30px); margin: 0px 0px 0px 30px; } .speech_balloon_text:before { transform: translateY(-50%) rotate(-45deg); top: 50%; left: -16px; } }

仕組み、解説、補足など

スポンサー広告