CSSで会話形式のフキダシデザインを作ってみる

CSSで何処までできるのか。
吹き出しデザインのCSS版です。

ランディングとかで使えそうですね！

こんな感じになるようです。

引用頂きます！

参考サイト：AIUEO Lab2

記事：CSSで会話形式のフキダシデザインを作ってみる

フキダシデザインhtmlとcss

俺は男だ〜〜！

なにを〜〜、俺が男だ〜〜〜〜！！！

<!-- /.question_Box -->
<div class="question_Box">
<div class="question_image"><img class="aligncenter size-full wp-image-11310" src="https://tqs.jp/wp-content/uploads/2014/09/Image-1_21-150x1501.png" alt="" width="90" height="90" /></div>
<div class="arrow_question">
俺は男だ〜〜！
</div>
<!-- /.arrow_question -->
</div>
<!-- /.question_Box -->
<div class="question_Box">
<div class="answer_image"><img class="aligncenter size-full wp-image-11277" src="https://tqs.jp/wp-content/uploads/2014/09/Image-1_18-150x1501.png" alt="" width="90" height="90" /></div>
<div class="arrow_answer">
なにを〜〜、俺が男だ〜〜〜〜！！！
</div>
<!-- /.arrow_answer -->
</div>
<!-- /.question_Box -->

/*============================================================
フキダシデザイン 
============================================================*/
.arrow_answer,
.arrow_question {
    position: relative;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 30px 25px;
    border-radius: 10px;
    width: 70%;
    font-size: 13px;
}
.arrow_question {
    float: right;
    margin-right: 20px;
}
.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_question:after,
.arrow_question:before { right: 100%; }
.arrow_answer:after,
.arrow_answer:before { left: 100%; }
.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -15px;
}
.arrow_answer:after { border-left-color: #fff ; }
.arrow_question:after { border-right-color: #fff ; }
.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 16px;
    margin-top: -16px;
}
.arrow_answer:before { border-left-color: #c8c8c8; }
.arrow_question:before { border-right-color: #c8c8c8; }
.question_image { float: left; }
.answer_image {
    float: right;
    margin-right: 20px;
}
.answer_image img,
.question_image img { border-radius: 50px; }
.question_Box {
    margin-bottom: 25px;
    overflow: hidden;
}

と言ったぐらいになります。

これ使えるなぁ〜〜〜ｗ。

対話形式のcustomフィールド作っておけばショートコードでどこにでも入れれるって感じですねぇ。

非常に面白い！

早速何かに使おうっと！！