横並びにしたボックスの色を左右で変え、吹き出しを作るには

２つ横並びにしたボックスがあるのですが、片方ずつ色を変えて、さらに左には吹き出しを入れたいと思っております。

現在、ボックスを2つ横並びにするところと、背景色を変えるのと、吹き出しの挿入はできています。

が、背景色を左右のボックスで変えるのと、吹き出しの位置を変えるのはできていません。

css
1<style>
2.flex{
3  padding: 2.5% 0;
4  display: flex;
5  flex-direction: row;
6}
7.flex:before {
8  content: "";
9  position: absolute;
10  top: 100%;
11  left: 50%;
12  margin-left: -15px;
13  border: 15px solid transparent;
14  border-top: 15px solid #0454a4;
15}
16.flex > *{
17  min-width: 8%;
18  background: #0454a4;
19  font-size: 20px;
20}
21</style>

html
1<div class="flex">
2  <p><b><tr><td align="center">
3あいうえお</td></tr>
4</b></p>
5  <p>あいうえお</p>
6</div>

あと、無料ツールのHTMLサービスを使ってサイトを作っているのですが、なぜか吹き出しが

のように、本来は下に来るはずの文言の下に来てしまいます。

どうすれば色を左右で変えることができ、なおかつ吹き出しの位置も直せるでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

横並びに flex を使うのは正解ですが、HTMLがぐちゃぐちゃですね。
一度、HTML、CSSを基本から学習されることをお勧めします。

とりあえず下記のHTMLとCSSでご希望のレイアウトになります。

html
1<div class="flex">
2  <div class="left-box">
3    あいうえお
4  </div>
5  <div c1ass="right-box">
6    あいうえお
7  </div>
8</div>

css
1.flex{
2  padding: 2.5% 0;
3  display: flex;
4  flex-direction: row;
5  position: relative;
6}
7.flex > div{
8  width: 50%;
9  font-size: 20px;
10  margin: 0;
11  text-align: center;
12  padding: 10px;
13  border: 1px solid #0454a4;
14}
15
16.left-box {
17  color: #ffffff;
18  background-color: #0454a4;
19}
20.left-box::before {
21  content: "";
22  position: absolute;
23  bottom: -8px;
24  left: 25%;
25  margin-left: -15px;
26  border: 15px solid transparent;
27  border-top: 15px solid #0454a4;
28}