Responsive diagonal css lines

Question

I need help setting up a diagonal line in css so that it matches many resolutions via mobile. Theres a div with 100% width and a diagonal line that should remain in its place inside this div, but every time I change the resolution of the window, the line moves up or down. I must be able to do something.

Here is an example:

.wrapper { width: 100%; position: relative; border: 1px solid red; overflow: hidden; padding-bottom: 12px; } .upper-triangle { -moz-transform: rotate(-3.5deg); -o-transform: rotate(-3.5deg); -webkit-transform: rotate(-3.5deg); -ms-transform: rotate(-3.5deg); transform: rotate(-3.5deg); border-color: black; border-style: solid; border-width:2px; position: relative; top: -21px; zoom: 1; width: calc(100% - -2px); right: 1px; } .arrow-wrapper { position: absolute; top: 41px; left: 22px; z-index: 1; } .arrow-wrapper::before { border-style: solid; border-width: 16px 0px 0px 20px; border-color: transparent transparent transparent black; position: absolute; content: ""; } .arrow-wrapper::after { position: absolute; content: ""; width: 0; height: 0; margin-top: 8px; margin-left: 4px; border-style: solid; border-width: 16px 0 0 20px; border-color: transparent transparent transparent white; } 

HTML:

 <div class="wrapper"> <div class="headline"> <img class="image" width="36" height="36"/> </div> 

http://jsfiddle.net/MkEJ9/417/

Answer 1

You need to set the anchor point where you want to apply the rotation. Your transformation changes position because it rotates from the center by default, which in this case is not what you want.

Use in your css:

 .upper-triangle { ... -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; ... } 

Check out this updated script: http://jsfiddle.net/MkEJ9/420/

Note: in your fiddle I had to change top to 10px .

Answer 2

Maybe something like this works? fiddle

 <script> $(document).ready(function(){ var viewportHeight = $(window).height(); var viewportWidth = $(window).width(); var width = viewportWidth; var height = viewportHeight*0.6; var imgSize = "100%" + ' ' + "100%"; $('.div').css("width", width); $('.div').css("height", height); $('.div').css("background-size", imgSize); }); $(window).resize(function(){ var viewportHeight = $(window).height(); var viewportWidth = $(window).width(); var width = viewportWidth; var height = viewportHeight*0.6; var imgSize = width + ' ' + height; $('.div').css("width", width); $('.div').css("height", height); $('.div').css("background-size", imgSize); }); </script> <style> .div { background-image: url('http://indesignsecrets.com/wp-content/uploads/2010/07/step_1.jpg'); background-position: left top; background-repeat: no-repeat; background-color: yellow; } </style> <div class="div"></div>