Duyarlı diyagonal çizgiler css

Question

Mobil cihazlar aracılığıyla birçok çözünürlüğe uyacak şekilde css'de çapraz bir çizgi ayarlama konusunda yardıma ihtiyacım var. % 100 genişliğe sahip bir div ve bu div içindeki yerinde kalması gereken bir çapraz çizgi var, ancak pencerenin çözünürlüğünü her değiştirdiğimde çizgi yukarı ya da aşağı gidiyor. Yapabileceğim bir şey olmalı.

İşte bir örnek:

.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

Sen dönüş uygulayan yerden çapa noktasını ayarlamak gerekir. Dönüşümünüz pozisyonu değiştiriyor çünkü varsayılan olarak merkezden dönüyor, ki bu da sizin istediğiniz gibi değil. sizin css

Kullanım:

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

Kontrol Bu güncellenmiş keman: http://jsfiddle.net/MkEJ9/420/

Not: Ben top10px geçmek zorunda kaldı senin keman içinde.

Answer 2

Belki böyle bir şey çalışır? 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>