-3
A
답변
0
점은 변환을 사용하고 설정하는 것입니다 "고정 된"지점의 변형 원점, 여기 오른쪽 상단 :
transform-origin:100% 0;
그런 다음 당신은 회전 또는 요소를 왜곡 할 수 있습니다
HTML :
<div></div>
CSS :
body{
background:gold;
}
div{
position:absolute;
width:100%; height:100%;
right:50%; top:0;
background:teal;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
}
+0
web-tiki에 감사드립니다. 당신의 솔루션이 훨씬 낫습니다. 'transform-origin : 100 % 0;에 대해서는 알려진 바가 없습니다. – muro
0
아니 완벽한 솔루션과는 약간의 수정을 필요로하지만 트릭을 수행해야합니다
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
margin-left:-1000px;
width: 4000px;
height: 2000px;
background-color: yellow;
}
.arrow {
width: 0;
height: 0;
border-top: 2000px solid red;
border-right: 2000px solid transparent;
}
당신은 여기에서 볼 수 있습니다 http://codepen.io/anon/pen/vsaLc
그리고 당신은 시도하지 않은 아무것도? – Terry
메신저 translateX() 및 rotate() http://codepen.io/anon/pen/dCKcs 사용에 대한 생각 시간에 – muro
문제는 회전이 div의 중심에 적용된다는 것입니다. – muro