效果图
编辑
实现代码
<template> <el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" :modal="false" class="AskquestDrawer" > 内容。。。 </el-drawer> </template>
.AskquestDrawer { z-index:999 !important; height:100vh; /deep/ .el-drawer__open .el-drawer.rtl { width:75% !important; } /deep/ .el-drawer__open .el-drawer.rtl:before { content: ''; width: 120%; height: 300%; background: linear-gradient(100deg, #EDF1F4 0, #EDF1F4 35%, #F3F5F5 35%, #F3F5F5 52%, #EDF1F4 52%, #EDF1F4 65%, #F0FAFB 65%, #F0FAFB 73.5%, #EDF1F4 73.5%, #EDF1F4 80%, #F0FAFB 80%, #F0FAFB); display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(10deg); transform-origin: center; } } linear-gradient(渐变角度值,开始颜色 开始颜色位置,结束颜色 结束颜色位置, 开始颜色 开始颜色位置,...... )
.AskquestDrawer { z-index:999 !important; height:100vh; /deep/ .el-drawer__open .el-drawer.rtl { width:75% !important; } /deep/ .el-drawer__open .el-drawer.rtl:before { content: ''; width: 120%; height: 300%; background: linear-gradient(100deg, #EDF1F4 0, #EDF1F4 35%, #F3F5F5 35%, #F3F5F5 52%, #EDF1F4 52%, #EDF1F4 65%, #F0FAFB 65%, #F0FAFB 73.5%, #EDF1F4 73.5%, #EDF1F4 80%, #F0FAFB 80%, #F0FAFB); display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(10deg); transform-origin: center; } }
linear-gradient(渐变角度值,开始颜色 开始颜色位置,结束颜色 结束颜色位置,
开始颜色 开始颜色位置,......
)