Question

我在寻找形成这种形状的方法时已经耗尽了很多选择，我开始认为这可能是不可能的。基本上我喜欢响应的全宽梯形，其上有渐变。我在大部分地方都使用SVG，但在Y轴上缩小的点是相对于视图框的，所以当梯形垂直拉伸或水平收缩时，事情开始看起来很糟糕：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <style>
    * {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }
    body,
    html {
      /* background:red; */
    }
    .trap-container {
      position: relative;
      width: 100%;
    }
    .trap-container svg {
      position: absolute;
    }
    .trap-content {
      position: relative;
      color: black;
      padding: 40px 20px;
    }
  </style>

</head>

<body>

  <div class="trap-container">

    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="yellow" stop-opacity="1" />
          <stop offset="100%" stop-color="orange" stop-opacity="1" />
        </linearGradient>
      </defs>
      <polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)">
      </polygon>
    </svg>

    <div class="trap-content">
      This DIV works fine with minimal content. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
    </div>

  </div>

  <br />
  <br />

  <div class="trap-container">

    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="yellow" stop-opacity="1" />
          <stop offset="100%" stop-color="orange" stop-opacity="1" />
        </linearGradient>
      </defs>
      <polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)">
      </polygon>
    </svg>

    <div class="trap-content">
      But stretch it out and the trapezoid angles are off because they are relative. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here.
    </div>

  </div>

</body>

</html>

有没有办法让SVG多边形相对于另一个点定位？例如，将一个点的y位置设置为比另一个点低10个像素。我相信我可以通过一些javascript实现这一点，但如果找不到它的解决方案会很好。

Answer 1

几个月前我遇到了类似的问题，但有保证金。
我用谷歌搜索了一下，发现了一个名为 calc 的 CSS 功能。
您可以通过以下方式学习：
w3schools、developer.mozilla.org、css-tricks.com

SVG梯形（多边形），其中包含相对于其他点和渐变的点

1 个答案: