CSSで作った吹き出し枠の、三角の位置が変えられない

Question

こちらで教えていただいて、左下に三角が表示された吹き出しは出来ましたが、
その三角の位置を、右上にしたいと思ったとき、
値を変えたりしても、出てこなくなってしまいました。

左下用のCSS
.my_triangle-isosceles {
position: relative;
padding: 0.1px 5px 0.1px 5px;
margin: 0.5em 0 0.5em;
color: #ffffff;
font-weight : bold;
background: #0000ff;
border-radius: 10px;

background: linear-gradient(top, #f9d835, #0000ff);
opacity: 0.5;
z-index: 10;
width: 98%;
}

/* creates triangle /
.my_triangle-isosceles:after {
content: "";
display: block; / reduce the damage in FF3.0 */
position: absolute;
bottom: -10px;
left: 25px;
width: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: #0000ff transparent;
}

右上にしたいCSS
.to_triangle-isosceles {
position: relative;
padding: 0.1px 5px 0.1px 5px;
margin: 0.5em 0 0.5em;
color: #ffffff;
font-weight : bold;
background: #006400;
border-radius: 10px;

background: linear-gradient(top, #f9d835, #006400);
opacity: 0.5;
z-index: 10;
width: 98%;
}

/* creates triangle /
.to_triangle-isosceles:after {
content: "";
display: block; / reduce the damage in FF3.0 */
position: absolute;
bottom: -10px;
left: 25px;
width: 0;
border-width: 10px 10px 0
border-style: solid;
border-color: #006400 transparent;
}

色々いじったのですが、うまくいかないため元に戻したつもりなのですが、三角すら表示されなくなりました？？？

こちらを右上の位置に変えたいのですが
どなたかアドバイスお願いいたします。

Answer 1

/* creates triangle /
.my_triangle-isosceles:after {
content: "";
display: block; / reduce the damage in FF3.0 */
position: absolute;
top: -10px;
right: 25px;
width: 0;
border-width: 0 10px 10px ;
border-style: solid;
border-color: #0000ff transparent;
}

http://cssdeck.com/labs/collab/mmmwjfdh

Comments

[it_solution_lab]

ありがとうございます
変えたかったのは　my では無く　to のほうでしたが無事出来ました。
というか、この設定、やってみたはずなのですが、
今回やったら出来ました。

Answer 2

こんにちは。

CSSのサンプルコードを書くこともできるのですが、下記のジェネレーター系Webサービスをご利用になれば、どのような構造で書かれているのかがおわかりになると思います。

CSS ARROW PLEASE!（リンク）

どれだけいじっても、ソースコードを吐き出しますので、安心して、三角（ひげ）の位置やサイズを変えたり、ボーダーの幅や色を変えたり、いろいろと試してみてください。

ちなみに、同ジェネレーターでは、三角（ひげ）の位置が四辺ともセンターに表示されますが、
上下の辺で右に移動させたい場合は、下記のプロパティ

「.arrow_box:after」の「margin-left:」の値
「.arrow_box:before」の「margin-left:」の値

それぞれに必要量（00px）をプラスしてください。

以上、ご参考いただければ幸いです。

Comments

[it_solution_lab]

ありがとうございました。
こちらのサイトは知っておりましたが、
もう、一度、設定してしまったので、そこの中で修正したかったのでした。
でも、また、こちらでも作り直してみようとも思います。

[退会済みユーザー]

it_solution_labさん、コメント（返信）をいただきありがとうございます。
そうでしたか、上記のコードを、三角が右上になるよう、動くようにしたいということだったのですね。
それはともかく、ByronHasegawaさんの回答によって解決できたことはよかったです。
紹介させていただいたサイトは、また別の機会に使ってみてください。