我想在我的body之外创建一个div，倾斜45度，接触到右上边缘的body，并具有根据图纸的宽度.
对于body的任意宽度和高度，应该是这种情况.
这就是我所走的距离，但它还没有完全起到作用.
<html>
<body>
<div class="target">
</body>
</html>
.target {
position: fixed;
right: -50rem;
width: 100%;
transform: rotate(-45deg);
}
你可以依靠vw和vh单位以及一些几何图形
.target {
position: fixed;
top: 0;
right: calc(100vh/-1.414);
left: calc(100vw - 100vw/1.414);
height: 200vmax;/* big value here*/
transform-origin: calc(100vw/1.414) 0;
transform: rotate(45deg);
background:red;
}
/* 1.414 = sqrt(2) */<div class="target"></div>下面是另一个更好地查看结果的演示:
.box {
width: 400px;
height: 300px;
margin: 100px auto;
position: relative;
border: 2px solid;
}
.target {
position: absolute;
z-index: -1;
top: 0;
right: calc(300px/-1.414);
left: calc(400px - 400px/1.414);
height: 700px;/* big value here*/
transform-origin: calc(400px/1.414) 0;
transform: rotate(45deg);
background:red;
}
/* 1.414 = sqrt(2) */<div class="box">
<div class="target"></div>
</div>