How to make arrow background_html/css_WEB-ITnose

For an address like http://qa.tourizz.com/newui/latest/today/news-and-promotions, how do you make a background with an arrow on the left? The arrow is outside the gray background. When selected or hovered, the background turns into this yellow arrow. How do you think it can be done well?
Now it is made with css. There is always a deviation in the connection between the arrow and the rectangular frame, and the gap can be seen.

Reply to discussion (solution)

New feature of HTML5, flip a rectangle 45 degrees to form a triangle. The triangle is displayed on the right side of the rectangle and becomes an arrow shape

A new feature of HTML5, flip a rectangle 45 degrees to form a triangle. The triangle is displayed on the right side of the rectangle and becomes an arrow shape
This is how it is done now. After the rotation, the base of the triangle and the left rectangle are The heights are not consistent so there are always gaps.

Quoting the reply from wzs_xyz on the 1st floor: A new feature of HTML5. Flip a rectangle 45 degrees to form a triangle. The triangle is displayed on the right side of the rectangle and becomes an arrow shape
This is how it is done now, rotate The base of the back triangle and the left rectangle are not consistent in height, so there is always a gap.
It’s cumbersome and incompatible. It’s better to use a background image

I don’t understand why it requires rotation. That's the diagonal of the square, and there's the problem of the root.
You can also draw triangles directly using border

<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;}

I don’t understand why it requires rotation. That's the diagonal of the square, and there's the problem of the root.
You can also draw triangles using border directly
XML/HTML code?1<div id="arrow">arrow</div>
CSS code?12345678910111213141516#arrow { width: 100px; height: 30px ; Background:......

I don’t understand why it uses rotation. That's the diagonal of the square, and there's the problem of the root.
You can also draw triangles using border directly
XML/HTML code?1<div id="arrow">arrow</div>
CSS code?12345678910111213141516#arrow { width: 100px; height: 30px ; Background:......
Thank you, master, I tried pictures and rotation but it didn't work. This method works.
But I don’t understand why a triangle can come out like this?

Got it, thank you