なんで、上から目線なんだよ
鳥だもん、
WordPressテーマ Raindropsで、縦書きの吹き出しテスト
縦書きフォーマットというと新聞や書籍と言われますが、漫画も? 吹き出しだけでなくコマも右から左に流れていて、これは縦書きですね。
そんなことから、「じゃ吹き出し書いてみようか」という事で、試し書き
HTML
<div class="fukidasi-wrap"> <div class="fukidasi-wrap-koma" style="background-image:url(https://tenman.info/labo/css/files/gorilla-300x200.jpg);"> <div class="oval-speech-border rd-square bubble-1" > <div class="centered">なんで、上から目線なんだよ</div> </div> </div> <div class="fukidasi-wrap-koma" style="background-image:url(https://tenman.info/labo/css/files/eagle-300x198.png);"> <div class="oval-speech-border rd-square bubble-1" > <div class="centered">鳥だもん、</div> </div> </div> </div>
CSS
.fukidasi-wrap{
display:flex;
flex-wrap:wrap;
flex-direction:row-reverse;
justify-content:flex-start;
}
.fukidasi-wrap-koma{
flex-basis:50%;
background-size:contain;
min-width:400px;
padding:1em;
box-sizing:border-box;
flex:1;
background-position:left bottom;
background-repeat:no-repeat;
}
.writing-mode-mix-article .bubble-1{
width:100px;
height:300px;
float:right;
}
.writing-mode-mix-article .bubble-2{
width:150px;
height:300px;
float:right;
}
.writing-mode-standard-article .bubble-2, .writing-mode-standard-article .bubble-1{
margin-top:200px;
float:none;
width:300px;
height:150px;
position:relative;
top:-200px;
}
吹き出しのCSSは以下を使用しました。
.oval-speech-border {
position: relative;
padding: 70px 30px;
margin: 1em auto 60px;
border: 10px solid #f3961c;
text-align: center;
color: #333;
background: #fff;
-webkit-border-top-left-radius: 240px 140px;
-webkit-border-top-right-radius: 240px 140px;
-webkit-border-bottom-right-radius: 240px 140px;
-webkit-border-bottom-left-radius: 240px 140px;
-moz-border-radius: 240px / 140px;
border-radius: 240px / 140px;
}
.oval-speech-border:after {
content: "";
position: absolute;
z-index: 2;
bottom: -40px;
right: 50%;
width: 20px;
height: 31px;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: #f3961c;
margin-right: 20px;
background: transparent;
-webkit-border-bottom-right-radius: 40px 50px;
-moz-border-radius-bottomright: 40px 50px;
border-bottom-right-radius: 40px 50px;
display: block;
}