文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >设置分离器剪辑路径(多边形)响应

问设置分离器剪辑路径(多边形)响应
EN

Stack Overflow用户
提问于 2021-11-12 10:08:25
回答 1查看 104关注 0票数 0

我是个用css剪辑路径的新手，但我想做的是用两种背景颜色做一个剪辑路径分隔符。我试着查找是否有人已经做了类似的事情，但我没有找到它。我使用的是Tailwindcss CSS和regulair CSS以及HTML

这就是我到目前为止所取得的成果：Codepen

代码：

代码语言：javascript
复制
<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
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-13 09:17:14

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

一种替代方法是使用CSS中的一个特性，它将保持一个斜率。这就是线性梯度。

这段代码引入了两个新类。bgSlope使用斜率绘制背景，而bgDual确保黄色延伸到父元素上，无论相对于居中内容的整体宽度有多大。

当然，当视区变得非常窄，第二个两列移动到下面时，必须进行一些修改，否则你会得到一个有趣的角度，但我不知道你想要对狭窄设备上的颜色做什么。

​

代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69941141

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档