回答編集履歴

1 追記

GeorgeCohta

GeorgeCohta score 2016

2015/02/10 16:54  投稿

こんにちは。
CSSのサンプルコードを書くこともできるのですが、下記のジェネレーター系Webサービスをご利用になれば、どのような構造で書かれているのかがおわかりになると思います。
**CSS ARROW PLEASE!**([リンク](http://cssarrowplease.com/))
どれだけいじっても、ソースコードを吐き出しますので、安心して、三角(ひげ)の位置やサイズを変えたり、ボーダーの幅や色を変えたり、いろいろと試してみてください。
ちなみに、同ジェネレーターでは、三角(ひげ)の位置が四辺ともセンターに表示されますが、  
上下の辺で右に移動させたい場合は、下記のプロパティ  
```lang-<ここに言語を入力>  
「.arrow_box:after」の「margin-left:」の値  
「.arrow_box:before」の「margin-left:」の値  
```  
それぞれに必要量(00px)をプラスしてください。  
 
以上、ご参考いただければ幸いです。

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