程序员经验分享-hwhale

如何制作带有渐变的曲线形状？

2024-03-06

I have to create image like this using CSS:- enter image description here

如果不可能，那么我如何以最小的图像尺寸使用它？就像下面的代码一样，我使用了两个图像，但这也不起作用......

<div style="background:url('https://i.stack.imgur.com/veeS8.png') no-repeat top center, url('https://i.stack.imgur.com/2i7ed.png') repeat-y top 50px center; widhth:100%; height:800px; background-size:100%;">

</div>

也可以在不使用图像的情况下进行遮蔽。这样就比较灵活了。您可以通过更改变量轻松控制斜率。

.container {
  --slope: 100px;
  width: 100%;
  height: 500px;
  --mask: radial-gradient(farthest-side, #000 99%, transparent 100%) 50% 0 / 150% calc(var(--slope) * 2) no-repeat, 
          linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--slope)) no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(90deg, rgba(133, 132, 242, 1) 0%, rgba(35, 136, 253, 1) 50%, rgba(127, 237, 226, 1) 100%);
}
<div class='container'></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

如何制作带有渐变的曲线形状？ 的相关文章

随机推荐

  • Shell 脚本：获取 python: 命令未找到错误

    当我从 shell 脚本调用 Python 脚本时 它运行良好 python script py 但是当我从 Gerrit 中提取相同的脚本 然后添加调用 Python 脚本的代码后 它给了我以下错误 script sh line 126

  • php require_once 尝试仅在我的生产服务器上包含第二次

    我在各种包含文件的顶部都有这段代码 require once functions php 有时我需要包含几个包含文件来生成页面 并且在我的本地服务器上这工作正常 因为上面的代码告诉它只包含一次functions php 因此它不会尝试声明函

  • MS Entity Framework VS NHibernate 及其派生贡献（FluentNHibernate、Linq for NHibernate）

    我刚刚读过这个article http visualstudiomagazine com Articles 2009 12 01 Entity Sequel aspx Page 1关于实体框架 4 实际上是版本 2 实体框架 http ms

  • 将 for-each 循环替换为 lambda 表达式

    我只是重构一些旧项目以使用 Java 8 的功能 int counter 1 for Checker checker checkers if counter lt checkers size checker setNextChecker c

  • 不要使用 Xcode 8 复制 swift 库吗？

    How to not在 Xcode 8 中自动嵌入 Swift 动态库 我尝试过设置ALWAYS EMBED SWIFT STANDARD LIBRARIES为 否 无论如何默认为 否 但它仍然将 Swift 动态库复制到应用程序包中 我正

  • Require.js 延迟加载远程 url

    我的本地文件系统上有一个名为 moment js 的文件 并使用 require js 加载它 如下所示 initialize function require moment function data console log data 但

  • Java中杀死进程的正确方法

    在 Java 中终止进程的最佳方法是什么 获取 PID 然后用以下命令杀死它Runtime exec Use destroyForcibly 这两种方法有什么区别 还有其他解决方案吗 如果您要终止的进程已由您的应用程序启动 那么你可能已经参

  • Tapestry5 无法将视频流传输到 iPad

    我想通过后端带有 Tapestry5 5 3 5 的 HTML5 视频标签将视频流式传输到我的 iPad 通常 服务器端框架甚至不应该在其中发挥作用 但不知何故它确实发挥了作用 无论如何 希望这里有人能帮助我 请记住 我的项目很大程度上是一

  • Kafka 连接：提供了配置 XXX，但不是 AdminClientConfig 中的已知配置

    启动 Kafka Connect 时 我看到很多警告 10 33 56 706 DistributedHerder WARN org apache kafka clients admin AdminClientConfig The conf

  • 如何使用 AngularJS 创建可排序的手风琴？

    I found 用户界面可排序 https github com angular ui ui sortable并使其能够很好地处理简单的列表等 我的应用程序已经使用了ui引导程序 http angular ui github io boot

  • 使用 AirPrint 打印 PDF 会导致输出较小

    我尝试打印 pdfUIPrintInteractionController它加载在UIWevView 好消息是我可以打印 坏消息是打印输出太小 any help would be appreciated IBACTION printPDF

  • 如何将对象传递给 numpy 点函数

    假设我已经定义了我的对象 import numpy as np class myTensor def init self data self data np array data self parent 如何将 myTensor 作为输入传

  • Sphinx Pygments 词法分析器过滤器扩展？

    我有一种类似 Lisp 的语言 我想在 Sphinx 代码片段文档中强调使用 Pygments 我的方法是扩展现有的 CommonLispLexer 以使用 NameHighlightFilter 添加内置名称 但是 它不起作用 所以我一定

  • cordova - 失败：不支持 q

    当我构建 cordova 时 此消息视图 不支持使用 requireCordovaModule 加载非cordova模块 q 相反 将此模块添加到您的依赖项中并使用常规 require 来加载它 如何解决这个问题 附言 我在这个构建问题之前

  • Android SDK 管理器无法下载新文件

    我试图获取最新的 android 源代码 5 0 只是为了看看它看起来如何 但是当我尝试从 Android SDK 下载源代码时 它给了我一个错误 说local找不到网址 这是日志 Fetching https dl ssl google

  • 如何拉取已安装应用程序名称、包名称和可绘制图标的列表

    我试图弄清楚如何将此代码实现到我现有的源代码中 目前 我有一些源显示所有已安装应用程序的列表视图 单击将向应用程序发送意图 我需要一些关于如何拉出图标并将其添加到列表视图中的支持 任何帮助 源代码编辑 链接等都可以帮助我解决这个问题 谢谢

  • 使用node.js child_process调用python脚本

    我试图从我的节点文件调用 python 代码 这是我的node js代码 var util require util var spawn require child process spawn var process spawn pytho

  • 使用 nth-child 选择多个子元素

    div div p nth child 1 to 5 如何使用第 n 个子元素选择多个数字 这样我就可以获取子元素 1 到 5 而无需编写 div div p nth child 1 div div p nth child 2 div di

  • Firebird数据库SYSDBA连接错误

    我刚刚安装了 Win64 版 Firebird 并且尝试连接到用 ISQL 预打包的员工数据库 按照Firebird官方的步骤进行操作快速入门指南 https www firebirdsql org file documentation h

  • 如何制作带有渐变的曲线形状？

    I have to create image like this using CSS 如果不可能 那么我如何以最小的图像尺寸使用它 就像下面的代码一样 我使用了两个图像 但这也不起作用 div style background url ht

热门标签