主页 / 问题 / 964827
Accepted
Алексей
Asked:2020-04-03 11:05:51 +0000 UTC2020-04-03 11:05:51 +0000 UTC

绘制渐变

  • 772

是否可以在这种元素上实现渐变

在此处输入图像描述

这里既有切角，有从暗到亮的线性渐变，也有颜色变化，线条重复 5 个像素。

或者根本不理会这些垃圾并将背景插入为png？

css

1 个回答

  1. Best Answer

    主要问题不是梯度本身，而是它的适应性，问题就在这里……对于固定尺寸，一切都很简单：

    body { background-image: url('https://isstatic.askoverflow.dev/m9NKc.png'); }

.grad {
  position: relative;
  height: 100px;
  width: 600px;
  overflow: hidden;
  border: 2px solid red;
}

.grad:after {
  content: '';
  position: absolute;
  height: 450%;
  width: inherit;
  background: 
    repeating-linear-gradient(90deg, 
      rgba(255, 255, 255, 0.07) 0px, 
      rgba(255, 255, 255, 0.07) 10px, 
      rgba(255, 255, 255, 0) 10px, 
      rgba(255, 255, 255, 0) 20px), 
    linear-gradient(180deg, 
      #b7df67, 
      #00af01);
  transform-origin: center center;
  transform: translate(0%, -39%) rotate(45deg);
}
    <div class="grad"></div>

    • 2

相关问题