设置分隔符剪辑路径（多边形）响应
Setting seperator clip path ( polygon ) responsive
我对使用 css 剪辑路径还很陌生，但我想做的是为 2 种背景颜色创建一个剪辑路径分隔符。我试图查找是否有人已经做过类似的事情，但我没有找到。我正在使用 Tailwindcss 并且只是使用 CSS 和 HTML
这是我到目前为止的进展：
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>
我现在的问题是它没有响应。降低屏幕分辨率后，您可以看到文字重叠。
有人可以告诉我从这里去哪里的指示吗？我不确定我的方向是否正确，或者我的代码是否需要完全更改。
这是我想要达到的结果
问题是整体的纵横比随着不同 viewports/devices 的变化而变化，因此 % 测量值需要保持相同的倾斜角度变化，并且需要一些计算（例如在 JS 中）来保持。
一种替代方法是使用 CSS 中的一个特征，它将保持一个坡度。那就是线性渐变。
此代码段介绍了两个新的 类。 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>
我对使用 css 剪辑路径还很陌生，但我想做的是为 2 种背景颜色创建一个剪辑路径分隔符。我试图查找是否有人已经做过类似的事情，但我没有找到。我正在使用 Tailwindcss 并且只是使用 CSS 和 HTML
这是我到目前为止的进展： 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>
我现在的问题是它没有响应。降低屏幕分辨率后，您可以看到文字重叠。
有人可以告诉我从这里去哪里的指示吗？我不确定我的方向是否正确，或者我的代码是否需要完全更改。
这是我想要达到的结果
问题是整体的纵横比随着不同 viewports/devices 的变化而变化，因此 % 测量值需要保持相同的倾斜角度变化，并且需要一些计算（例如在 JS 中）来保持。
一种替代方法是使用 CSS 中的一个特征，它将保持一个坡度。那就是线性渐变。
此代码段介绍了两个新的 类。 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>