回答編集履歴

3 またまた間違ってました ごめんなさぁ~~ぃ><;;

退会済みユーザー

退会済みユーザー

2016/05/04 17:15  投稿

三角部分は`border-color`で指定してください^^
`<div class="bubble`に背景色用のサブクラスを設けて指定色毎にCSSを書いて置いて
ランダム抽出あるいはDBから選出した値に合わせて classを追加する方がいいとおもいます。
```html
<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">
```
```css
.pink{
background-color:#e4d2d8;
}
.pink:after {
border-top: 10px solid #e4d2d8;
border-right: 10px solid #e4d2d8;
}
.violet{
background-color:#e4d2d8;
}
.violet:after {
border-top: 10px solid #e4d2d8;
border-right: 10px solid #e4d2d8;
}
.orange{
background-color:#e8d3c7;
}
.orange:after {
border-top: 10px solid #e8d3c7;
border-right: 10px solid #e8d3c7;
}
.yellow{
background-color:#e0ebaf;
}
.yellow:after {
border-top: 10px solid #e0ebaf;
border-right: 10px solid #e0ebaf;
}
```
:after部分訂正しました! ごめんなさい><;;
2 間違い訂正しました....m(_ _)m

退会済みユーザー

退会済みユーザー

2016/05/04 17:10  投稿

三角部分は`border-color`で指定してください^^
`<div class="bubble`に背景色用のサブクラスを設けて指定色毎にCSSを書いて置いて
ランダム抽出あるいはDBから選出した値に合わせて classを追加する方がいいとおもいます。
```html
<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">
```
```css
.pink{
background-color:#e4d2d8;
}
.pink:after {
border-color:#e4d2d8;
border-top: 10px solid #e4d2d8;
}
.violet{
background-color:#e4d2d8;
}
.violet:after {
border-color:#e4d2d8;
border-top: 10px solid #e4d2d8;
}
.orange{
background-color:#e8d3c7;
}
.orange:after {
border-color:#e8d3c7;
border-top: 10px solid #e8d3c7;
}
.yellow{
background-color:#e0ebaf;
}
.yellow:after {
border-color:#e0ebaf;
border-top: 10px solid #e0ebaf;
}
```
```
:after部分訂正しました! ごめんなさい><;;
1 本題部分の回答を書き忘れてましたw

退会済みユーザー

退会済みユーザー

2016/05/04 16:54  投稿

三角部分は`border-color`で指定してください^^  
`<div class="bubble`に背景色用のサブクラスを設けて指定色毎にCSSを書いて置いて
ランダム抽出あるいはDBから選出した値に合わせて classを追加する方がいいとおもいます。
```html
<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">
```
```css
.pink{
background-color:#e4d2d8;
}
.pink:after {
border-color:#e4d2d8;
}
.violet{
background-color:#e4d2d8;
}
.violet:after {
border-color:#e4d2d8;
}
.orange{
background-color:#e8d3c7;
}
.orange:after {
border-color:#e8d3c7;
}
.yellow{
background-color:#e0ebaf;
}
.yellow:after {
border-color:#e0ebaf;
}
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る