苍白的背景太单调，做个磨砂渐变背景

今日需求

之前做的404页面是这样的：

其实看上去已经不错了，不过整个应用都是纯白的背景，略显单调。下面我将用CSS做个磨砂渐变色背景，先放上最终效果：

实现

在这个页面（组件）的外面包一层当作背景，然后在里面加上三个不规则多边形，大小位置和颜色都可以自由定义：

const StyledRoot = styled('div')(({ theme }) => ({
  width: '100%',
  height: '100%',
  position: 'relative',
  '.g-polygon': {
    position: 'absolute',
    opacity: 0.5,
  },
  '.g-polygon1': {
    width: 500,
    height: 200,
    left: '40%',
    top: '35%',
    background: theme.palette.warning.main,
    clipPath: 'polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%)',
  },
  '.g-polygon2': {
    width: 600,
    height: 250,
    left: '8%',
    top: '45%',
    background: theme.palette.red.main,
    clipPath: 'polygon(10% 0, 100% 70%, 100% 100%, 20% 90%)',
  },
  '.g-polygon3': {
    width: 600,
    height: 300,
    right: '20%',
    top: '45%',
    background: theme.palette.purple.main,
    clipPath: 'polygon(80% 0, 100% 70%, 100% 100%, 20% 90%)',
  },
  '.NoAccessPage': {
    position: 'relative',
    background: 'transparent',
    zIndex: 1,
  },
}));

<StyledRoot className="g-bg">
    <div className="g-polygon g-polygon1"></div>
    <div className="g-polygon g-polygon2"></div>
    <div className="g-polygon g-polygon3"></div>
    <NoAccessPage>...</NoAccessPage>
</StyledRoot>

现在我们能看到这样的效果：

然后我们在这个背景元素上加上高斯模糊蒙版，就是使用backdrop-filter：

const StyledRoot = styled('div')(({ theme }) => ({
  width: '100%',
  height: '100%',
  position: 'relative',
  '&::before': {
    content: '""',
    position: 'fixed',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backdropFilter: 'blur(80px)',
    zIndex: 1,
  },
  '.g-polygon': {
    position: 'absolute',
    opacity: 0.4,
  },
  '.g-polygon1': {
    width: 800,
    height: 300,
    left: '32%',
    top: '28%',
    background: theme.palette.warning.main,
    clipPath: 'polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%)',
  },
  '.g-polygon2': {
    width: 1000,
    height: 600,
    left: '5%',
    top: '30%',
    background: theme.palette.red.main,
    clipPath: 'polygon(10% 0, 100% 70%, 100% 100%, 20% 90%)',
  },
  '.g-polygon3': {
    width: 800,
    height: 400,
    right: '15%',
    top: '40%',
    background: theme.palette.purple.main,
    clipPath: 'polygon(80% 0, 100% 70%, 100% 100%, 20% 90%)',
  },
  '.MuiContainer-root': {
    position: 'relative',
    background: 'transparent',
    zIndex: 1,
  },
}));

<StyledRoot className="g-bg">
    <div className="g-polygon g-polygon1"></div>
    <div className="g-polygon g-polygon2"></div>
    <div className="g-polygon g-polygon3"></div>
    <NoAccessPage>...</NoAccessPage>
</StyledRoot>

这样就可以看到就是文章开头的效果啦：

同时在窄一点的屏幕上看到的是这样：