Отзывчивые диагональные линии css

Question

Мне нужна помощь в настройке диагональной линии в css для вставки в множество разрешений с помощью мобильного телефона. Theres div с шириной 100% и диагональной линией, которая должна оставаться на своем месте внутри этого div, но каждый раз, когда я изменяю разрешение окна, линия перемещается вверх или вниз. Должно быть что-то, что я могу сделать.

Вот пример:

.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

Вы должны установить точку привязки, откуда применить вращение. Ваше преобразование меняет положение, потому что оно по умолчанию поворачивается из центра, что в данном случае не то, что вы хотите.

Использования в вашем CSS:

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

Проверить эту обновленную скрипку: http://jsfiddle.net/MkEJ9/420/

Примечания: в вашей скрипке я должен был изменить top к 10px.

Answer 2

Может быть что-то вроде это работает? 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>