Change the anchor position of the top css selector?

Question

Change the anchor position of the top css selector?

Navigation

#1 by (1 votes)

0

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

So she would have to stay.

Butitlookslikethis:

$(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><divclass="listras-frente listra-fina-frente-1"></div>
  </body>
  </html>

html css3

asked by anonymous 08.09.2017 / 21:18

1 answer

score 1 · Answer 1

___ erkimt ___ Change the anchor position of the top css selector? ______ qstntxt ___

Hey, I'm having a problem defining a web design. my problem consists of doing a width that is being used to draw a cross line on an "html" page. But when I use 42% the margin-top position is centered in the middle of %code% and so this %code% ends up losing part of its size because it is off the page! would anyone know if there is any way to change the anchor point from the margin-top to one of the sides, rather than being centered?

So she would have to stay.

Butitlookslikethis:

$(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><divclass="listras-frente listra-fina-frente-1"></div>
  </body>
  </html>