斜 div 没有正确转换？

Question

I have an oblique div created with transform: skewY(-10deg); But i can't center it on the top of the page with the instruction top:%.

It is not working responsively.

How do I get this to work?

With top:0 and left:0:

With top:-135px:

Answer 1

Try changing the css of the element triangle-div to the below.

#triangle-div{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 200px solid transparent;
    position: fixed
}

Answer 2

Please provide as jsfiddle or an image of what you are trying to achieve - It is unclear what you want.

However, to position the div centrally:

div {
  position: fixed;
  top: 0;
  left: 50%;
  transform:translateX(-50%);
}