I currently don't have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can't show the images because of an NDA. So will describe the best I can.
- I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser.
- I have a "Arrow" png image with transparent background that needs to be flushed against the right side of the browser.
- The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.
- The content of the page will be centered as well. Just in case this info was needed.
Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo. All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.
I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn't something that is possible.
Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.
Someone provided a solution which might work, but the arrow bleeds below the transparent logo png when the browser width is made too small. I am posting below, but if anyone might know of code improvements or a different method then I am all open.
width : 400px;
margin: 0 auto;
padding: 10px 0 10px 200px;