Responsive diagonal lines css

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.