设置分隔符剪辑路径（多边形）响应答案

【问题标题】：Setting seperator clip path ( polygon ) responsive设置分隔符剪辑路径（多边形）响应
【发布时间】：2021-12-24 16:43:47
【问题描述】：

我对使用 css 剪辑路径很陌生，但我试图做的是为 2 种背景颜色制作剪辑路径分隔符。我试图查找是否有人已经做过类似的事情，但我没有找到。我正在使用 Tailwindcss，只是使用 HTML 来调整 CSS

这是我到目前为止的进展： Codepen

代码：

<div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 w-full ">
    <div class="grid grid-cols-1 md:grid-cols-3 ">
        <div class="py-12 px-4">
            <h3 class="text-2xl text-white font-bold">Lorum ipsum</h3>
            <p class="text-white mt-4">Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum</p>
        </div>
        <div class="py-12 px-4  z-10 flex items-center">
            <ul class="mx-auto space-y-4 text-white text-xl">
                <li class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Lorum ipsum
                </li>
                <li class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Lorum ipsum
                </li>
                <li class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Lorum ipsum
                </li>
            </ul>
        </div>
        <div class="py-12  px-4 z-10 flex items-center">
            <ul class=" mx-auto space-y-4 text-white text-xl">
                <li class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Lorum ipsum
                </li>
                <li class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Lorum ipsum
                </li>
                <li class="flex">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Lorum ipsum
                </li>
            </ul>
        </div>
    </div>
</div>
<div class=" hidden md:flex absolute h-full w-3/5 top-0 right-0 bg-yellow-300 " style="clip-path: polygon(0 100%, 100% 100%, 100% 0, 5% 0%); -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 5% 0%);"></div>

我现在的问题是它没有响应。降低屏幕分辨率后，您可以看到文本重叠。

有人能给我一些关于从这里去哪里的指示吗？我不确定我的方向是否正确，或者我的代码是否需要完全更改。

这是我试图达到的结果

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

问题是整体的纵横比随着不同的视口/设备而变化，因此百分比测量需要保持相同的坡度变化角度，并且需要一些计算（例如在 JS 中）来保持。

另一种方法是使用 CSS 中的一项功能，该功能将保持斜率。那是线性梯度。

这个 sn-p 引入了两个新类。 bgSlope 使用斜率绘制背景，并且 bgDual 确保黄色延伸到父元素的右侧，与居中内容相比的整体宽度多少。

当然，当视口变得如此狭窄以至于后两列移动到下方时，必须进行一些更改，否则你会得到一个有趣的角度，但我不知道你想用在狭窄的设备上着色。

<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <style>
    .bgSlope {
      background-image: linear-gradient(-60deg, rgba(252, 211, 77) 62.5%, transparent 62.5% 100%);
    }
    
    .bgDual {
      background-image: linear-gradient(to right, rgba(209, 213, 219) 0 70%, rgba(252, 211, 77) 70% 100%);
    }
  </style>
</head>

<body>
  <div class="w-full relative bgDual">

    <div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 w-full ">
      <div class="grid grid-cols-1 md:grid-cols-3 bgSlope">
        <div class="py-12 px-4">
          <h3 class="text-2xl text-white font-bold">Lorum ipsum</h3>
          <p class="text-white mt-4">Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum Some more lorum ipsum</p>
        </div>
        <div class="py-12 px-4  z-10 flex items-center">
          <ul class="mx-auto space-y-4 text-white text-xl">
            <li class="flex">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Lorum ipsum
            </li>
            <li class="flex">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Lorum ipsum
            </li>
            <li class="flex">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Lorum ipsum
            </li>
          </ul>
        </div>
        <div class="py-12  px-4 z-10 flex items-center">
          <ul class=" mx-auto space-y-4 text-white text-xl">
            <li class="flex">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Lorum ipsum
            </li>
            <li class="flex">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Lorum ipsum
            </li>
            <li class="flex">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg> Lorum ipsum
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

这就是我正在寻找的东西，非常感谢！似乎您在 bgSlope 课程中犯了一个小错误。如果您修复它，则不同意此答案:) 查看您的相对位置。或者只是将相对类添加到 bgSlope 所在的同一元素。
感谢您的发现！不需要此设置，当我认为不需要它们但正在测试它并且显然我忘记删除它时，我倾向于在属性前加上“r”（用于冗余）。我现在已经删除了。
啊，很高兴知道。我现在看到，当它被删除时什么都没发生是的：P 无论如何都批准了这个问题并再次感谢 :)