Css 填充浏览器左右两侧缺少的对角线渐变

CSS

尝试在浏览器视口的两侧设置对角线渐变，但仅设法使顶部和底部显示渐变。想要显示类似于对角线渐变示例的对角线渐变

渐变应该如下图所示

如何使用浏览器所有侧面（包括浏览器的左侧和右侧）上的“边框”填充主体

---

感谢您的帮助。

使用

边框图像创建的对角线渐变类似这样的工作方式（这不是确切的工作方式，而是有助于了解其产生方式的示例）：


为较低层的整个主体添加对角线渐变
剪裁边框宽度以外的区域，使内部部分透明。（您可以将其可视化，就像在对角线渐变层的顶部放置一个白色背景层，高度和宽度=容器的高度和宽度-边框宽度）

下面是如何创建它的可视化视图。您可以看到
div
具有对角线渐变，而
div:after
使用指定给它的白色背景遮罩内部。如果您可以在您的案例中模仿这种方法，那么它是非常好的，因为这是最简单和最推荐的CSS方法。当然，您可以使用CSS或SVG
clip path
来剪裁内部部分，但是
clip path
的问题是IE不提供任何支持


。对角梯度{
位置：相对位置；
高度：200px；
宽度：200px；
背景图像：线性渐变（左上角，rgb（254,23144），rgb（254151,52））；
}
.对角线坡度：之后{
位置：绝对位置；
内容：''；
高度：计算（100%-40px）；
宽度：计算（100%-40px）；
顶部：20px；
左：20px；
背景：白色；
}
左右两侧的坡度应该是多少？它应该从顶部橙色变为底部粉红色（或）左-橙色到右-粉色？@harry-左和右的渐变应该跟随顶部和底部的颜色流，这样看起来就像对角线渐变示例我认为你不能用你拥有的渐变和背景图像来重现对角线边界渐变效果。对角线渐变的工作方式是，您可以假设后面的一个元素具有全身背景，而另一个具有白色背景的元素位于其上方（或剪裁内部）。这在背景图像中是不可能的（除非你模仿我上面所说的）。你目前的方法最接近的可能是。或者，另一个更复杂的方法是找到梯度的中点并使用。@Harry-非常感谢你的帮助！你的方法很接近。@Harry-我明白你的意思。看起来很复杂。再次感谢您的帮助。我很抱歉-我在内容中使用href标记进行测试，但它似乎无法单击？是因为位置：固定的吗？没抓住你。你是说渐变被指定给锚定标记？我不确定
位置：fixed
是否会影响它，但如果您解释确切的用例，我可能会建议一个不同的解决方案。一般来说，渐变是元素的一部分，因此会对单击事件做出响应。不，我的意思是我想在内容中有一个链接，例如导航和lorem，但它根本不能被单击。这个例子-是的，我也试过使用z-index。将使用不同的div仅测试渐变。谢谢，在看到你的评论之前我试过了。非常感谢。
body:before, body:after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 20px;
    background-position: 0 0, 0 100% ;
    background-repeat: no-repeat;
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    background-size: 100% 20px;
    background-image: -webkit-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -webkit-linear-gradient(right, #ff9933 0%, #3c4ed5 100%);
    background-image: -moz-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -moz-linear-gradient(right, #ff9933 0%, #3c4ed5 100%);
    background-image: -o-linear-gradient(to right, #ff9933 0%, #ff1493 100%), -o-linear-gradient(right, #ff9933 0%, #ff1493 100%);
    background-image: linear-gradient(to right, #ff9933 0%, #ff1493 100%), linear-gradient(to left, #ff9933 0%, #ff1493 100%);
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}