矢印の作り方background_html/css_WEB-ITnose

http://qa.tourizz.com/newui/latest/today/news-and-promotions のようなアドレスの場合、左側に矢印がある背景を作成するにはどうすればよいですか? 矢印は灰色の背景の外側にあります。選択するかホバーすると、背景がこの黄色の矢印に変わります。どうすればうまくできると思いますか？
今CSSで作っているのですが、矢印と四角いボックスの接続部分にどうしてもズレがあり、隙間が見えてしまいます。

ディスカッションへの返信(解決策)

html5の新機能、長方形を45度反転して三角形を作ります 三角形が長方形の右側に表示され、矢印の形になります

html5の新機能です。 , 長方形を45度反転して三角形を形成すると、三角形が長方形の右側に表示され、矢印の形になります
回転すると、三角形の底辺と高さが一致しなくなりました。左側の長方形なので、常に隙間が生じます。

1階のwzs_xyzさんからのリプライを引用： HTML5の新機能、長方形を45度反転して三角形を作る 三角形が長方形の右側に表示され、矢印の形になります
こんな感じです。回転後、三角形の底辺と左側の長方形の高さが一致しないため、常に隙間ができます。
面倒で互換性がないので、背景画像を使用する方が良いです

なぜ回転が必要なのかわかりません。それは正方形の対角線であり、根の問題があります。
ボーダーを使用して直接三角形を描くこともできます

<div id="arrow">arrow</div>

#arrow {    width: 100px;    height: 30px;    background: #ec8b46;    position: relative;}#arrow:after {    content: ' ';    width: 0;    height: 0;    border-top: 15px solid transparent;    border-bottom: 15px solid transparent;     border-left: 15px solid #ec8b46;     position: absolute;    left: 100px;}

なぜ回転が必要なのかわかりません。それは正方形の対角線であり、根の問題があります。
ボーダーを使用して三角形を描くこともできます
XML/HTML コード?1a732622e61bc84791bb4a4c6fc61fe75arrow16b28748ea4df4d9c2150843fecfba68
CSS コード?12345678910111213141516#arrow { width: 100px; height: 30px;
なぜ回転を使用するのかわかりません。それは正方形の対角線であり、根の問題があります。
ボーダーを使用して三角形を描くこともできます
XML/HTML コード?1a732622e61bc84791bb4a4c6fc61fe75arrow16b28748ea4df4d9c2150843fecfba68
CSS コード?12345678910111213141516#arrow { width: 100px; height: 30px;ありがとう、マスター。写真と回転を試しましたが、この方法は機能しませんでした。
でも、なぜこのように三角形ができるのかわかりません。

わかりました、ありがとうございます