具有动态高度的 div 的 CSS 线性渐变

2024-01-26

我需要创建一个像这样的线性渐变梯度要求 https://i.stack.imgur.com/yzaXn.png

我试图用这样的CSS来实现它:

background: linear-gradient(-60deg,
          rgba(255,183,107,1) 0%,
          rgba(255,167,61,1) 15%,
          rgba(255,124,0,1) 15%,
          rgba(255,127,4,1) 100%);

这适用于特定高度,但随着 div 高度的变化,渐变形状也会发生变化,如下所示div 高度增加或减少时的问题 https://i.stack.imgur.com/CLADA.png。 我希望渐变始终接触 div 的右上角。

非常感谢任何帮助


您可以像下面这样编码:

.box {
  height:100px;
  background: 
    linear-gradient(to bottom right,#0000 50%,rgba(255,183,107,1) 50.1%) 
        top right /1000px 1730px no-repeat /* 1.73 = tan(60deg) */
    rgba(255,127,4,1);
    
    /* resize and see the result*/
    resize:both;
    overflow:hidden;
}
<div class="box"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

具有动态高度的 div 的 CSS 线性渐变 的相关文章

随机推荐

  • 具有基于类视图的 django 事务管理

    我有一个基于类的视图 其方法如下 class Comment View def dispatch self request args kwargs super Comment self dispatch request args kwarg
  • 如何在网站上使用自定义字体? [复制]

    这个问题在这里已经有答案了 为了让我的网站看起来不错 我需要使用自定义字体 特别是 Thonburi Bold 问题是 除非用户安装了字体 否则不会显示该字体 它也不显示在 Firefox 中 这个问题有解决方法吗 您必须像这样在样式表中导
  • 是否可以对可变参数宏进行字符串化?

    gcc GCC 4 7 2 c89 是否可以对可变参数宏进行字符串化 我有以下宏 我想输出结果字符串fmt和论点 define ERROR MESSAGE priority fmt do MODULE LOG priority fmt VA
  • 制作将使用 Windows Temp 目录的自解压 zip (SFX) Windows 程序安装程序的最简单方法是什么?

    我有一个非常简单的程序 由调用 x86 Win32 dll Lib dll 的 NET 2 0 exe Program exe 组成 我想将它们捆绑到一个名为 Tool exe 的自解压 zip SFX 中 Tool exe会将文件 Pro
  • Node-Red:Raspberry Pi B+ 上的“错误: 节点未部署”

    上周我了解了 Node Red 多么有潜力 在将其安装到 Raspberry Pi B 上并遵循基本教程后 我遇到了一些问题 当我按照注入 调试节点示例连接它们并部署它们时 我收到消息 部署成功 到目前为止 一切都很好 我在 http lo
  • 如何将无限 css 动画链接到一次性 css 动画?

    我正在尝试为一个元素旋转设置动画 就像有人启动陀螺一样 起初 元素会逆时针旋转 然后过渡到无限顺时针旋转 我的一般 CSS 在这里 div animation PreRotate 800ms ease out 0ms 1 Rotate 50
  • 无法嵌入 python 来使用 zip 库

    我正在尝试嵌入 python 并提供 dll 和 python 库的 zip 并且不使用任何已安装的 python 也就是说 如果用户没有 python 我希望我的代码能够使用提供的 dll zip 来工作 This post https
  • 删除 WebApplications 上的目录时 ASP.NET 丢失会话数据

    我正在 asp net mvc2 中创建一个 Web 应用程序 并且在一个有趣的情况下遇到了一个小问题 我认为这是 Web 应用程序的默认行为 会话状态 inproc 当我删除 Web 应用程序根目录中的目录时 我的会话数据将被清除 我读过
  • HttpURLConnection 关闭 IO 流

    我是 Java 和 HttpURLConnection 的新手 我应该在断开连接之前关闭打开的 IO 流吗 如果我关闭流 是否还需要断开连接 哪种是正确的实施方式 try String uri http localhost 8081 RES
  • 如何使用 karma+jasmine 测试 Angular 2 中的位置

    Angular 2 v 2 0 0 TS 业力 茉莉花 我测试了这个功能 单击返回上一页 public isClick boolean false public backClicked location Location void if t
  • Rails 3 等效于periodic_call_remote

    似乎periodically call remote在 Rails 3 中已弃用 有什么想法如何实现相同的功能吗 我一直在寻找使用 Rails 3 执行此操作的正确方法 但现在我确信 Rails 3 中没有与 periodical call
  • Lucee 上的 JAR 未找到 BouncyCastleProvider

    我们已成功使用 AmazonPay API for Java amazon pay api sdk java 2 2 2 jar 在 Adob e ColdFusion 中 我们最近引入了 Lucee 在 Jetty 上 也在 OpenJD
  • Android 2.3:只读文件系统卡住[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 你好 我有一台 LG Optimus HUB E510 Android 设备 两周前 我root了我的设备以访问内部存储并更改一些文件 例
  • Django - NoReverseMatch 位于 /accounts/password_reset/

    我正在尝试使用内置的 Django 密码重置 纵观整个Django 文档 https docs djangoproject com en 1 9 topics auth default 据我所知 它基本上只涉及添加一些 URLurls py
  • Vim 中保留大小写的替代品

    Can this https stackoverflow com questions 367052 case preserving find replace in visual studio可以在 Vim 中完成吗 我的意思是 搜索 Bad
  • 在 Python 中将一列日期时间转换为纪元

    我目前在使用 Python 时遇到了问题 我有一个 Pandas DataFrame 其中一列是带有日期的字符串 格式为 Y m d H m 00 000 例如 2011 04 24 01 30 00 000 我需要将整列转换为整数 我尝试
  • Mac OSX - Xcode 安装目录

    Xcode 完成构建后 有没有办法让它将可执行文件复制到特定目录 站点 cgi bin 我有目标Installation Directory设置到正确的文件夹 使用skip installation 未经检查的 但没有运气 我缺少什么吗 检
  • Python 在处理我的 JSON 文件时出现什么问题?

    我尝试使用 python 从 json 文件中删除第一个键和值 在运行程序时 我遇到了错误 错误如下 import json with open testing as json data data json load json data f
  • IE8拉伸表格单元格高度

    我有一个基于表格的页面布局 尽管我想用更现代的标记来重组它 但这不是一个选择 该布局使用一个跨越两行的单元格作为右侧的侧边栏 而左上角的单元格包含一个简单的标题 左下角的单元格包含页面的主要内容 左上角单元格的高度固定 底部单元格和右侧单元
  • 具有动态高度的 div 的 CSS 线性渐变

    我需要创建一个像这样的线性渐变梯度要求 https i stack imgur com yzaXn png 我试图用这样的CSS来实现它 background linear gradient 60deg rgba 255 183 107 1