实现背景图为斜纹效果

效果图

 

编辑

实现代码

<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(渐变角度值,开始颜色 开始颜色位置,结束颜色 结束颜色位置,

开始颜色 开始颜色位置,......

posted @ 2025-03-06 14:49  Qing`ing  阅读(21)  评论(0)    收藏  举报