반응하는 대각선 CSS

Question

모바일을 통해 많은 해상도에 맞춰 CSS로 대각선을 설정하는 데 도움이 필요합니다. Theres는 100 % 너비의 div와 해당 div 안에있는 대각선을 유지하지만 윈도우의 해상도를 변경할 때마다 선이 위아래로 움직입니다. 할 수있는 일이 있어야합니다.

을 Heres 예 :

이

.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/

참고 : 나는 top10px에 변경했다 당신의 바이올린에.

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>