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

Question

Мне нужна помощь с настройкой диагональной линии в CSS, чтобы соответствовать во многих разрешениях с помощью мобильного телефона. Есть 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

Может быть, что-то подобное работает? играть на скрипке

<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

Лучше использовать SVG, который дает хорошие отзывчивые диагональные линии, работает почти во всех браузерах.