时间戳

首页 > 解决方案 > 设置分隔符剪辑路径（多边形）响应

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

问题描述

我对使用 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>

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

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

这是我试图达到的结果在此处输入图像描述

标签： htmlcsstailwind-css

解决方案

问题是整体的纵横比随着不同的视口/设备而变化，因此百分比测量需要保持相同的坡度变化角度，并且需要一些计算（例如在 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>

推荐阅读