Olhá, estou tendo um problema na definição de um design web.
meu problema consistem um fazer uma <div>
que está sendo usada para desenhar um linha transversal em uma pagina "html".
Porém quando eu uso a -webkit-transform: skewY(10deg)
a posição margin-top fica centralizada no meio da <div>
e assim essa <div>
acaba perdendo parte de seu tamanho pois fica fora da pagina!
alguém saberia se existe alguma forma de mudar o ponto de ancora da margin-top para uma das laterais, ao invés de ficar centralizada?
Assim que ela teria que ficar.
mas ela fica assim:
$(window).load(function(){
$('.listra-fina-frente-1').css({'width':'42%', 'top':'44%', 'left':'0%', '-webkit-transition':'1s'});
});
.listra-fina-frente-1{
position: absolute;
top: 52%;
left: 42%;
height: 0.64935064935064935064935064935065%;
width: 0;
background-color: rgba(255,0,0,0.5);
transform: skewY(10deg);
-ms-transform: skewY(10deg);
-webkit-transform: skewY(10deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="listras-frente listra-fina-frente-1"></div>
</body>
</html>