Responsive diagonal lines css - html

Question

I need help with setting a diagonal line in css to fit into many resolutions via mobile.
Theres a div with 100% width and a diagonal line that supposed to stay in its place inside that div but every time I change the resolution of the window the line moves up or down.
There must be something I can do.
Heres 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 from where to apply the rotation. Your transform is changing the position, because it by default pivots from the center, 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 this updated fiddle:
http://jsfiddle.net/MkEJ9/420/
Note: in your fiddle I had to change the 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>

Answer 3

Better to use SVG, which gives nice responsive diagonal lines, works on almost all browsers.
.box {
width: 20rem;
height: 10rem;
background-color: hsla(0, 0%, 70%, 0.3);
cursor: pointer;
position: relative;
}
.svg-stroke {
position: absolute;
width: 100%;
height: 100%;
}
<div class="box">
<svg class='svg-stroke' viewBox='0 0 10 10' preserveAspectRatio='none'>
<line x1='0' y1='0' x2='10' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
<line x1='10' y1='0' x2='0' y2='10' stroke='red' stroke-width='.6' stroke-opacity='0.2' />
</svg>
</div>