半分だけ色が違うボックスに吹き出しをつけたい

半分だけ色が違うボックスに吹き出しをつけたいと思っております。
出来上がり完成図はこんな感じです。

こういうコードを書きました。

css
1.box {
2  width: 600px;
3  height: 200px;
4  border: 1px solid;
5  background: linear-gradient(to right, #09529f 50%, #FFF 50%);
6}
7.box:after{
8    border: solid transparent;
9    content:'';
10    height:0;
11    width:0;
12    pointer-events:none;
13    position:absolute;
14    border-color: #09529f;
15    border-top-width:24px;
16    border-bottom-width:24px;
17    border-left-width:23px;
18    border-right-width:23px;
19    margin-left: -23px;
20    border-top-color:#09529f;
21    top:100%;
22    left:16%;
23}
24</style>

html
1<div class='arrow_box'>ここに文字</div>

「box:after」の部分が、吹き出し部分にあたることはわかっております。
なので、吹き出しジェネレーターで作ったものを色だけ変えて運用しようとしたのですが、ダメでした。

このコードのどこが誤りなのでしょうか。
教えていただけると助かります。

kei344

2020/02/17 03:51

https://teratail.com/questions/241807 こちらの問題を放置されています。

x_x

2020/02/17 06:47

吹き出しのない状態でさえ再現しないので、まず先にそちらを完成されたらどうでしょうか？

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

回答2件

ベストアンサー

HTML - 半分だけ色が違うボックスをCSSかHTMLで作りたい｜teratail
の続きですね。

最終目的がそれなら、「半分だけ色が違うボックス」ではなく「２つのボックスを横に並べる」というキーワードで調べたほうが楽に解決に行きつけると思いますよ。

あと、.box は .arrow_box が正しいですね。

吹き出しの矢印は下記のように修正してください。

css
1.arrow_box::after {
2    border: solid transparent;
3    content:'';
4    height:0;
5    width:0;
6    pointer-events:none;
7    position:absolute;
8    border-color: #09529f;
9    border-top-width:24px;
10    border-bottom-width:24px;
11    border-left-width:23px;
12    border-right-width:23px;
13    margin-left: -23px;
14    border-top-color:#09529f;
15    border-left-color:transparent; /*追加*/
16    border-right-color:transparent; /*追加*/
17    border-bottom-color:transparent; /*追加*/
18    top:100%;
19    left:16%;
20}