Linee diagonali reattive css

Question

Ho bisogno di aiuto con l'impostazione di una linea diagonale in css per adattarsi a molte risoluzioni tramite cellulare. C'è un div con larghezza del 100% e una linea diagonale che dovrebbe rimanere al suo posto all'interno di quel div ma ogni volta che cambio la risoluzione della finestra la linea si muove su o giù. Deve esserci qualcosa che posso fare.

Ecco un esempio:

.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

è necessario impostare il punto di ancoraggio da dove applicare la rotazione. La tua trasformazione sta cambiando la posizione, perché per impostazione predefinita fa perno dal centro, che in questo caso non è quello che desideri.

utilizzare per le css:

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

Scegli questa violino aggiornamento: http://jsfiddle.net/MkEJ9/420/

Nota: nel vostro violino ho dovuto cambiare il top-10px.

Answer 2

Forse qualcosa di simile funziona? 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>