PHPとCSS 吹き出し内の背景色をランダムに変更するには

Question

###前提・実現したいこと
度々質問させていただいてすみません！今回は、コメントが投稿されると、表示されるスレッドを吹き出しにして、その背景色を投稿に合わせてランダムに色を変えて表示する という処理をしたいと考えています。ランダムに選んだ色は投稿時に、mySQLに色番号をinsertして、SQL文で出力されたものを使用しようと思っているのですが、まずはその前の表示テストで、スレッドの背景の変更は出来ているのですが、吹き出しのはじの三角部分の色のところの処理の仕方がわかりません。

吹き出しのやり方はネット上で公開されているものを使わせていただきました。

###該当のソースコード

.bubble {
 display:inline-block;
 position: relative;
 padding:1em;
 border-radius:15px;
}
.bubble:after {
 position: absolute;
 content: " ";
 height: 0;
 width: 0;
}
/* 左三角半分 */
.bubble-half-left:after {
 right: 100%;
 top: 10%;
 border-top:10px solid ;
 border-left:10px solid transparent;
}
//--------------------------------------------------------------
表示部分
<?php
$var = array();
$var = array('#e4d2d8','#d3cfd9','#e8d3c7','#e0ebaf');
$result = $var[mt_rand(0, count($var)-1)];
?>
<div class="bubble bubble-half-left" style="background:<?php echo $result?>">
あいうえおかきくけこ</div>

###試したこと
CSSの、bubble-half-left:afterの中身をbubble:afterの中に一緒に入れてみたりしましたが、三角部分は真っ黒になります。

うまく中央部分と色を連動させることって出来ますでしょうか？
よろしくお願いいたします。

Answer 1

三角部分はborder-colorで指定してください^^
<div class="bubbleに背景色用のサブクラスを設けて指定色毎にCSSを書いて置いて
ランダム抽出あるいはDBから選出した値に合わせて classを追加する方がいいとおもいます。

<div class="bubble bubble-half-left pink">
<div class="bubble bubble-half-left violet">
<div class="bubble bubble-half-left orange">
<div class="bubble bubble-half-left yellow">

.pink{
background-color:#e4d2d8;
}
.pink:after {
border-right: 10px solid #e4d2d8;
}

.violet{
background-color:#e4d2d8;
}
.violet:after {
border-right: 10px solid #e4d2d8;
}

.orange{
background-color:#e8d3c7;
}
.orange:after {
border-right: 10px solid #e8d3c7;
}

.yellow{
background-color:#e0ebaf;
}
.yellow:after {
border-right: 10px solid #e0ebaf;
}

:after部分訂正しました！　ごめんなさい><;;

Comments

[kei344]

border-top-color か color で指定しないと、transparent を上書きしませんか？

[退会済みユーザー]

ぁ..そっか四角になっちゃいますね^^
ご指摘ありがとうございます..♪

.pink:after {
border-top: 10px solid #e4d2d8;
}
でダイジョブだと思います^^;;;;

[退会済みユーザー]

ぎゃ！　topじゃなくってrightでしたね！
おっちょこちょいですみません！
.pink:after {
border-right: 10px solid #e4d2d8;
}

[mari.rinn]

＞Sora-tanさん

ご回答くださりどうもありがとうございます！
なるほど～！ちょっとした発想の転換なのですね。私にはまだまだそれは出来ないので、ほんとに勉強になりました！　

で、コードも１例だけで良かったのに、全部書いてくださりとても感謝です！
CSSの方はコピペさせていただきまして（colorはborder-topで良かったんです）、
HTMLとPHPの方は、
<?php
$var = array();
$var = array('pink','violet','orange','yellow');
$result = $var[mt_rand(0, count($var)-1)];
?>
<div class="bubble bubble-half-left <?php echo $result; ?>">
あいうえおかきくけこ</div>

としたら無事にうまく出来ました～～～！！
ほんとにどうもありがとうございました！また何かありましたらよろしくお願いいたします～！

＞kei344さん
いつも的確なご回答をくださりどうもありがとうございます！
CSSの方もちゃんと勉強されててほんとに素晴らしいです！

また何かありましたらよろしくお願いいたします！

[退会済みユーザー]

下向きの三角で良かったんですね…????
つたない説明でごめんなさい
今後ともよろしくお願いします…♪