程序员经验分享-hwhale

不剪辑内容的剪辑路径

2024-01-06

我正在尝试使用剪辑路径创建形状背景，但我不想剪辑该 div 的子项/内容。

这是代码

div{
  -webkit-clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%);
    clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%);
    background-color: red;
}
<html>
<body>
<div class="content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur?
  Perferendis eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis.
  Quibusdam, dolorum aperiam ex veniam, nemo itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in.
  Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem!
  Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?
</div>
</body>
</html>

将其替换为渐变：

div.content {
  background: 
    /*first gradient start at 30px with a height of 40%*/
    linear-gradient(to bottom right, transparent 49.5%, red 50%) 0 30.3px/ 100% 40%, 
    /*second gradient start at bottom with a height of 60% - 30px (the remaining space)*/
    linear-gradient(red, red) bottom/100% calc(60% - 30px);
  background-repeat: no-repeat;
  max-width:700px;
}
<div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur? Perferendis
    eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis. Quibusdam, dolorum aperiam ex veniam, nemo
    itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in. Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim
    rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem! Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur
    maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?
  </div>

或者在伪元素上使用剪辑路径：

div.content {
  max-width: 700px;
  position: relative;
  z-index: 0;
}

.content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%);
  background-color: red;
}
<div class="content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur? Perferendis
  eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis. Quibusdam, dolorum aperiam ex veniam, nemo
  itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in. Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim
  rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem! Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur
  maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

clippath

不剪辑内容的剪辑路径 的相关文章

  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div

  • CSS - div 与父 div 底部对齐（内联块）

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让

  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但

  • CSS：水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此

  • 使用 CSS 自定义字体？

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中

  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不

  • 如何使用 a-href 标签链接回文件夹？ [复制]

    这个问题在这里已经有答案了 好吧 我在文件夹中有一个页面 该页面称为 jobs html 该文件夹简称为 jobs 它是我的 网站 文件夹的子文件夹 在 main 文件夹的主目录中是我的 home html 文件 当我尝试做的时候 a hr

  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案？

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01

  • 如何为背景图像添加边距？

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎

  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些

  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如

  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG

  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4

  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

  • 如何在悬停标签时显示块div

    如何在悬停标签时打开 div 标签 服务是标签的id services是div标签的id 我的 HTML 代码是 ul li a href Services a li ul div h1 Hello h1 div 我的CSS代码是这样的 S

  • dom 元素转换后 IE 显示水平滚动条

    我在网站的各个地方使用了以下 css http jsfiddle net uycq29mt 1 http jsfiddle net uycq29mt 1 a position absolute background red width 60

  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段

  • 如何使 WordPress 主题全宽？

    我尽了最大努力 但无法通过编辑 CSS 使以下主题全宽 屏幕 如果您能向我展示或给我有关此定制的提示 我将不胜感激 http demo mythemeshop com sociallyviral http demo mythemeshop

  • 位置：绝对在边框半径内且溢出：隐藏

    我遇到了问题border radius在webkit浏览器中找到了解决方案 网址如下 如何在 Chrome Opera 中使 CSS3 圆角隐藏溢出 https stackoverflow com questions 5736503 how

随机推荐

  • 通过相机扫描图像和从相机捕获图像有什么不同吗？

    我需要知道扫描和用相机拍照之间的区别 举个例子 我们通常用安卓手机扫描二维码 条形码之类的东西 它们也是图像 我们可以用相机拍照 它也图像 那么 扫描二维码是指拍摄图像并对其进行处理 还是有什么特殊的东西从像素值获取图像 最大的区别是当你c

  • 如何在 Openscenegraph 中从 2D 鼠标单击屏幕坐标点计算 3D 点（世界坐标）？

    我试图在 2D 屏幕空间上用户选择的点的 3D 空间上放置一个球体 为此 我尝试使用以下技术从 2d 点计算 3d 点 但该技术没有给出正确的解决方案 mousePosition x clickPos clientX window left

  • Jython easy_install 错误

    我的目的是向 jython 添加一些 python 库 即 suds 包 为此 请尝试遵循以下指示http www jython org jythonbook en 1 0 appendixA html setuptools http ww

  • $wpdb 在 WordPress 插件文件中不起作用

    我正在使用 WordPress 插件 我创建一个自定义表单 用户在其中添加值 然后单击提交按钮 当用户单击提交按钮时 它会重定向到自定义流程文件 我在其中编写用于插入和更新数据的查询 I my 进程 php文件 首先我打电话全局 wpdb

  • 当浏览器关闭时运行服务器端功能

    背景 我正在使用 C 代码隐藏创建一个非常简单的类似聊天室的 ASP NET 页面 当前用户 聊天消息显示在位于 AJAX 更新面板内的控件中 并使用计时器 它们每隔几秒从数据库中提取信息 我试图找到一种简单的方法来处理将用户退出浏览器时的

  • 如何避免从闭包中访问可变变量

    我有一些这样的代码 for var id 0 id lt message receiver length id var tmp id id zlib gzip JSON stringify message json function err

  • CameraUpdateFactory.newLatLngBounds 始终不工作

    我在 Android 谷歌地图上移动相机时遇到一些问题 我有这个功能 protected void centralizeMapToBounds final LatLng southwest final LatLng northeast fi

  • PostgreSQL 错误：致命：角色“用户名”不存在

    我正在设置 PostgreSQL 9 1 我不能用 PostgreSQL 做任何事 不能createdb can t createuser 所有操作都会返回错误信息 Fatal role h9uest does not exist h9ue

  • QML 是否支持属性的访问说明符（例如 Private）？

    我只是想知道 QML 中是否有像 C 中那样的私有属性等概念访问说明符 如果没有 是否想知道我的 QML 组件中有大约 10 个属性 但我必须限制仅访问 2 个属性 我们怎样才能实现这个场景 QML 本身没有这样的内置功能 但这里是 Qt

  • 如何获取 3D 维数组并将其转换为模型？

    我正在使用 Open CV 并且可以使用代码从图像中提取多维数据 但是显示它的简单方法是什么 我有一个 3D 数组 line start x y z line end x y z 线条之间的任何内容都将被坚实的平面填充 是否有某种函数可以用

  • 以编程方式向视图添加多个按钮，调用相同的方法，确定它是哪个按钮

    我想以编程方式将多个 UIButton 添加到视图中 按钮的数量在编译时未知 我可以像这样制作一个或多个 UIButton 在循环中 但为了简单起见而缩短 UIButton button UIButton buttonWithType UI

  • 从 *.wav 文件中提取幅度列表以在 Python 中使用

    我在编程和转换方面遇到了一些麻烦 我正在设计一个人工智能来识别乐器演奏的音符 并需要从波形文件中提取原始声音数据 我的目标是对文件中的时间块执行 FFT 运算以供 AI 使用 为此 我需要音频文件的幅度列表 但我似乎找不到可行的转换技术 这

  • 另一个“连接被对等方重置”错误

    我正在使用套接字模块在 python 中创建服务器 客户端应用程序 并且出于某种原因我的服务器不断结束连接 奇怪的是 它在 Windows 中完美运行 但在 Linux 中却不行 我到处寻找可能的解决方案 但没有一个有效 下面是代码的清理版

  • .NET 4.7.2 ASP.NET WebForms 网站中的依赖注入 - 构造函数注入不起作用

    我们目前正在处理一个较旧的项目 ASP NET Web 表单网站 并尝试看看是否可以为其设置依赖项注入 需要强调的是 这不是一个 Web 应用程序项目 它是较旧的类型 即网站 目前它的目标是 NET 4 7 2

  • 如何反向路由静态文件？

    起初我有一个 Twitter 图标的链接 public images twitter icon png 但现在我想根据类型显示 Twitter Facebook 或 LinkedIn 图标 因此 我创建了一个 FastTag 它将类型作为参

  • 应用程序启动后无法立即使用 ShowCursor(FALSE) 隐藏鼠标光标

    我需要在应用程序启动后立即隐藏鼠标光标 我为此使用 ShowCursor FALSE 但通常在 ShowCursor FALSE 之后 光标仍保留在屏幕上 直到鼠标移动 我和其他人在 Windows XP 到 10 的不同 PC 上重现了这

  • MySQL中如何计算当前行与上一行之间的时间差

    我有这样的 mysql 表 t1 我想要做的是在所有行之间进行计算并将值保存在名为 diff 的新列中 TICKETID DATENEW DIFF 16743 12 36 46 0 16744 12 51 25 15 minute 1674

  • unescape后如何转义嵌入的JSON

    使用 Json NET 进行序列化时 我需要在之前反序列化时取消转义之后转义嵌入的 JSON 这意味着我根据以下 JSON 进行了转义this https stackoverflow com questions 39154043 how d

  • leetcode：使用链表将两个数字相加

    我正在尝试解决涉及链表的中级问题之一 它是这样的 给您两个表示两个非负整数的非空链表 这些数字以相反的顺序存储 并且每个节点都包含一个数字 将两个数字相加并以链表形式返回总和 您可以假设这两个数字不包含任何前导零 除了数字 0 本身 蟒蛇代

  • 不剪辑内容的剪辑路径

    我正在尝试使用剪辑路径创建形状背景 但我不想剪辑该 div 的子项 内容 这是代码 div webkit clip path polygon 0 57 100 21 100 100 0 100 clip path polygon 0 57

热门标签