我想在 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>关于html - 在主体外部创建切线 45° div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75725224/