程序员经验分享-hwhale

如何为浏览器生成CMY三角形？ （CSS、SVG、画布？）

2024-04-19

我正在尝试为一个项目生成一个 CMY 三角形。我希望能够使用 css、svg 或 canvas 直接在网络上渲染它。

根据 Amelia 的评论，我尝试构建一个 CSS (SASS) 类来用线性渐变渲染三角形。

.triangle {
  @include background-image(
linear-gradient(to bottom, rgba(0, 252, 253, 1), rgba(0, 252, 253, 0.25) 50%, rgba(0, 252, 253, 0) 86.6%),
linear-gradient(-60deg, rgba(250, 11, 247, 1), rgba(250, 11, 247, 0.25) 50%, rgba(250, 11, 247, 0) 86.6%),
linear-gradient(60deg, rgba(252, 249, 10, 1), rgba(252, 249, 10, 0.25) 50%, rgba(252, 249, 10, 0) 86.6%)
  );

  width: 300px;
  height: 260px;
}

我无法使用通常的边框技术将这个想法应用于三角形，因为它应用于形状的背景图像。此外，混合似乎已关闭，中心点需要位于重心。我不知道如何解决这个问题。

我正在使用 d3.js 生成三角形的 SVG 路径。理想情况下，该解决方案可以应用于形状的“填充”属性。如果以另一种方式实现，我仍然可以覆盖并对齐 svg 和解决方案三角形。

另一种复杂性是：理想情况下，三角形不会完全是通常的 CMY 三角形。它需要与下面的三角形更相似。每个参数不是线性变化，而是保持在 100% 直到“半径”的一半，然后在后半部分降至零。还有一个 K 参数在中半部分变为零。

理想三角形：

正常的 CMY 三角形：


None

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

canvas

SVG

geometry

如何为浏览器生成CMY三角形？ （CSS、SVG、画布？） 的相关文章

  • 哪种 Javascript 解决方案（不是 .htc）可以真正在 IE7 和 8 中实现抗锯齿圆角？

    哪种 JavaScript 解决方案 不是 htc 确实可以在 IE7 和 8 中实现抗锯齿圆角CSS3在支持的浏览器中给出 我尝试了很多 http www ruzee com blog ruzeeborders http www ruze

  • 网格布局：创建 CSS，以便元素在调整相邻元素大小时保持位置

    我想在网格布局中构建一个简单的图像库 并且我正在使用类似的东西悬停时缩放 http www javascript fx com navigation imagezoom general help help html缩放悬停图像 但我宁愿使用

  • 使圆圈与 d3.js 上的多线匹配相同的颜色过滤？

    我有一个多线图 当按每种水果过滤时会更新 每条线条颜色对应不同的销售年份 在 的帮助下Shashank https stackoverflow com users 5569282 shashank 每个数据点线上的圆圈已添加到组中 而不是直

  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum

  • 如何在非 CSS3 浏览器上制作圆角？

    我知道在这种情况下我必须使用图像 每个角一个 例如 如果我需要给定元素周围有一个 4px 的纯蓝色边框 边框半径为 8px 我相应地设计了四幅图像 左上角 png 右上角 png 左下角 png 右下角 png 如果可能的话 我应该如何实现

  • 如何使用 JavaScript 检测 CSS 变量支持？

    最新版本的 Firefox 支持CSS 变量 http www w3 org TR css variables 但 Chrome IE 和许多其他浏览器没有 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能 但我还没有找

  • 用 tkinter 画圆更简单的方法？

    在a上画一个圆tkinter Canvas通常由create oval方法 然而 提供边界框通常是绘制圆的一种令人困惑的方式 想出一个捷径并不是特别困难 但我找不到其他人在做类似的事情 所以我将其发布 希望其他人发现它有用 这是一个称为猴子

  • 有没有办法编写屏幕阅读器会忽略的内容？

    我刚刚开发了一个需要视力正常和视障用户都可以访问的页面 内容的某些元素仅与视觉元素相关 因此根本不适用于使用屏幕阅读器的人 例如 链接在新窗口中打开视听演示文稿 但由于我无法控制的情况 窗口的大小被笨拙地调整 因此有一条消息说您应该调整窗口

  • Flexbox 的行之间可以有一条线吗？

    我有一个水平导航 它有点长 需要重新排列以适应狭窄的显示 我使用 flexbox 使其重排成多行 但行数较多时 导航项之间的划分就不那么明显了 我尝试在顶部给它们一个边框 它有点有效 但当然 边框仅在各个导航选项上可见 而不是在所有 Fle

  • 当鼠标悬停在伪元素上时触发CSS动画？

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http

  • 样式标签中的源映射是否有效？

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个

  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源？

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l

  • 如何适应特定子元素的宽度？

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保

  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow

  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的

  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失？

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and

  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h

  • 如何让div与包含td的高度相匹配？

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此

  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714

  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签？

    for var i 0 i

随机推荐

热门标签