Change the anchor position of the top css selector?

Asked

Viewed 282 times

0

Olhá, I’m having a problem defining a web design. my problem consists of a make a <div> which is being used to draw a cross line on an "html" page. But when I use the -webkit-transform: skewY(10deg) the margin-top position is centered in the middle of the <div> and so this <div> ends up losing part of its size because it’s out of the page! someone would know if there is any way to change the anchor point of the margin-top to one of the sides, rather than being centered?

So she would have to stay.

inserir a descrição da imagem aqui

but she gets like this:

inserir a descrição da imagem aqui

$(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>

html css3

1 answer

1

Is that it? I didn’t understand much of your doubt. How is it only with the width of 42%, the line does not go to the end, but I think your idea should be the same. 

$(window).load(function(){
		$('.listra-fina-frente-1').css({'width':'42%', 'top':'44%', 'right':'0%', '-webkit-transition':'1s'});
    });
.listra-fina-frente-1{
	position: absolute;
	top: 52%;
	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>

  • Yes the line has to be this size even, but in the html page when the line is created, because of the proximity to the top, part of it goes beyond the top of the browser.

Browser other questions tagged html css3

You are not signed in. Login or sign up in order to post.