程序员经验分享-hwhale

如何创建三角形背景？

2024-03-18

如上图所示，背景中有一些颜色相似但深浅不同的三角形。

我设法得到了相同的颜色

#4C27B3

https://codepen.io/JoyFulCoding/pen/EzXowL https://codepen.io/JoyFulCoding/pen/EzXowL

使用CSS如何实现这样的效果呢？


您可以考虑使用多个背景来实现此目的，但它似乎是随机背景，因此您将不得不使用多个图层。

这是一个示例，以防您想要重复模式。

我将使用不同的颜色，以便您可以轻松理解形状：

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient( 45deg, red    calc(0.7072 * 50px),transparent 0),
    linear-gradient( 45deg, black  calc(0.7072 * 50px),transparent 0)  50px -50px,
    linear-gradient(-45deg, blue   calc(0.7072 * 50px),transparent 0),
    linear-gradient(-45deg, orange calc(0.7072 * 50px),transparent 0) -50px -50px,
    linear-gradient(-225deg,green  calc(0.7072 * 50px),transparent 0),
    linear-gradient(-225deg,pink   calc(0.7072 * 50px),transparent 0)  50px  50px,
    linear-gradient(225deg, yellow calc(0.7072 * 50px),transparent 0),
    linear-gradient(225deg ,purple calc(0.7072 * 50px),transparent 0) -50px  50px;
    
  background-size:100px 100px;
}

然后您可以使用 CSS 变量对其进行优化：

body {
  --d:100px; /* Dimension */
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.707 = cosinus(45deg)*/
  background:
    linear-gradient( 45deg, red    var(--g)),
    linear-gradient( 45deg, black  var(--g))  calc(1 * var(--d)/2) calc(-1 * var(--d)/2),
    linear-gradient(-45deg, blue   var(--g)),
    linear-gradient(-45deg, orange var(--g))  calc(-1 * var(--d)/2) calc(-1 * var(--d)/2),
    linear-gradient(-225deg,green  var(--g)),
    linear-gradient(-225deg,pink   var(--g))  calc(1 * var(--d)/2)  calc(1 * var(--d)/2),
    linear-gradient(225deg, yellow var(--g)),
    linear-gradient(225deg ,purple var(--g))  calc(-1 * var(--d)/2)  calc(1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  margin:0;
  height:100vh;
}

最后你可以使用hsl() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#HSL_colors着色以根据您想要的颜色创建图案：

body {
  --d:100px; /* Dimension */
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.7072 = cosinus(45deg)*/
  --c:256, 64%; /* Base color */
  background:
    linear-gradient( 45deg, hsl(var(--c),20%)  var(--g)),
    linear-gradient( 45deg, hsl(var(--c),25%)  var(--g))  calc( 1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-45deg, hsl(var(--c),27%)  var(--g)),
    linear-gradient(-45deg, hsl(var(--c),32%)  var(--g))  calc(-1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-225deg,hsl(var(--c),30%)  var(--g)),
    linear-gradient(-225deg,hsl(var(--c),22%)  var(--g))  calc( 1 * var(--d)/2)  calc( 1 * var(--d)/2),
    linear-gradient(225deg, hsl(var(--c),40%)  var(--g)),
    linear-gradient(225deg ,hsl(var(--c),42%)  var(--g))  calc(-1 * var(--d)/2)  calc( 1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  margin:0;
  height:100vh;
}

您现在可以轻松拥有任何类型的背景：

.box {
  --d:100px; /* Dimension */
   --c:256, 64%; /* Base color */
   
   
  --g:calc(0.7072 * var(--d)/2),transparent 0; /* 0.7072 = cosinus(45deg)*/
  background:
    linear-gradient( 45deg, hsl(var(--c),20%)  var(--g)),
    linear-gradient( 45deg, hsl(var(--c),25%)  var(--g))  calc( 1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-45deg, hsl(var(--c),27%)  var(--g)),
    linear-gradient(-45deg, hsl(var(--c),32%)  var(--g))  calc(-1 * var(--d)/2)  calc(-1 * var(--d)/2),
    linear-gradient(-225deg,hsl(var(--c),30%)  var(--g)),
    linear-gradient(-225deg,hsl(var(--c),22%)  var(--g))  calc( 1 * var(--d)/2)  calc( 1 * var(--d)/2),
    linear-gradient(225deg, hsl(var(--c),40%)  var(--g)),
    linear-gradient(225deg ,hsl(var(--c),42%)  var(--g))  calc(-1 * var(--d)/2)  calc( 1 * var(--d)/2);
    
  background-size:var(--d) var(--d);
  
  width:200px;
  height:200px;
  display:inline-block;
}
<div class="box" style="--d:50px;--c:120,20%"></div>
<div class="box" style="--d:70px;--c:20,80%"></div>
<div class="box" style="--d:20px;--c:10,20%"></div>
<div class="box" style="--d:30px;--c:220,20%"></div>

在不久的将来，您可以使用更少的代码执行相同的操作conic-gradient.

The below code works only on chrome

.box {
  --d:100px; /* Dimension */
   --c:256, 64%; /* Base color */
   
  background:
    conic-gradient(hsl(var(--c),20%) 0.125turn,
                   hsl(var(--c),32%) 0.125turn 0.25turn,
                   hsl(var(--c),27%) 0.25turn  0.375turn,
                   hsl(var(--c),42%) 0.375turn 0.5turn ,
                   hsl(var(--c),30%) 0.5turn   0.625turn,
                   hsl(var(--c),22%) 0.625turn 0.75turn ,
                   hsl(var(--c),40%) 0.75turn  0.875turn,
                   hsl(var(--c),25%) 0.875turn 1turn)
    0 0/var(--d) var(--d);
  
  width:200px;
  height:200px;
  display:inline-block;
}
<div class="box" style="--d:50px;--c:120,20%"></div>
<div class="box" style="--d:70px;--c:20,80%"></div>
<div class="box" style="--d:20px;--c:10,20%"></div>
<div class="box" style="--d:30px;--c:220,20%"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

如何创建三角形背景？ 的相关文章

  • 有没有办法有一个屏蔽数字输入字段？

    我正在 Android 上创建一个 HTML5 应用程序 对于这个特定场景 我们有一个用于信用卡安全代码的输入字段 我们希望强制输入字段仅包含数字并被屏蔽 我没有运气搜索这个特定的案例 从我自己研究 尝试中可以看出 这不能纯粹通过 HTML

  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的

  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于

  • javascript中怪异模式的元素宽度？

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将

  • 您能否确定 CSS 文件的范围，使其仅适用于给定元素的后代？

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素

  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用

  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静

  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div

  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示

  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我

  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己

  • 使用 javascript 禁用按钮：FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python

  • Thymeleaf 下拉菜单中的默认值

    我正在使用 Spring MVC 和 thymeleaf 构建一个 Web 应用程序 我的下拉菜单是这样的并且它按预期工作

  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就

  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ

  • 如何在表格的 tbody/thead 部分周围创建边框？

    我正在尝试创建一个包含表格数据的页面 该页面必须显示为多个表格 然而 我有两个相互冲突的要求需要解决 每个表格周围都必须有边框 每个表格的列宽必须能够根据内容重新调整大小 但是 所有表中的列宽必须一致 即列的大小基于所有表中该列中最大的单元

  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用

  • 为什么字体扩展仅适用于 PDF，而不适用于其他格式（HTML、XLS、DOC）？

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext

  • 为什么我不能在 TCPDF 表中使用 č,ć,đ 图表？

    我正在为我的网站构建一个 tcpdf 文件 该 tcpdf 文件中有一个包含一些数据的表格 但我无法使该章程正常工作 对于编码 我使用 windows 1250 宪章女巫不起作用 我已经尝试过 utf 8 但仍然没有得到这个章程 tcpdf

  • javascript:window.print() 打印 2 页，而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图

随机推荐

热门标签