首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

撸一个在线css三角生成器

接下来介绍的一款工具——css三角生成器也是因为之前想要解放设计师的生产力, 自己又懒得切图或者写css代码, 所以想来想去还是自己做一个能自动生成css三角代码的工具吧....在线css三角生成器预览 ? 由预览动画我们可以看到通过在线工具我们可以轻松配置各种想要的三角, 并且能实时查看css代码. 开发完这个工具之后笔者再也不用担心还需要手写三角代码了....和笔者之前写的任何一个开源工具一样, 在开发项目前一定要明确需求和目标, 这里笔者简单整理一下需求: 生成任何大小的三角(size) 生成不同位置的三角(direction) 生成不同角度的三角(...接下来我们先分析一下用css实现三角的原理. 1.css画三角的原理 其实笔者在之前的文章中也分享过3种以上的使用css实现三角的方案, 这里笔者介绍一个通用的方法, 也就是用border来实现三角..., 大家还可以在此基础上继续扩展, 比如支持多边, 六角, ⭐五角等, 也是完全没问题的.

72940
您找到你想要的搜索结果了吗?
是的
没有找到

7个设计师必知的图标设计原理,收藏了!

001.明晰 图标的主要目标是快速传达概念。 ? 普锐斯Prime仪表盘上的图标(来源:2020年册) 在这一系列符号中,哪些是你看起来最清晰的呢?...在此播放图标中,尽管三角按看起来放置在圆的中心,但我们的眼睛却误认为是不对齐的。三角的较宽部分感觉比左侧“重”,所以我们要手工进行一些调整。...Telegram的图标简洁有趣: ? 电报图标 有时,UI图标会采用更具象的表现形式。这些Yelp图标是用来为用户展示热门食物搜索的一种令人愉快的方式。泰国食品图标中的虾非常精致: ?...Phosphor的图标套组将700+图标通过相同的一般准则和严格的测试,以保证每个图标一致。尽管每个图标都有不同的形状,但它们重量相同,并且可以很好地相互搭配使用。 ?...这些色彩斑斓的图标对用户说:“我们很古怪!” Twitter的图标柔软,明亮,清晰: ? Twitter图标 Sketch的图标精致而通透: ? Freemoji的图标则非常可爱: ?

1.2K10

星联赛 - 最社交电竞设定

据统计,中国有领跑全球的6亿玩家规模,其中超过4.3亿游玩家都在不同程度上参与或关注电竞赛事。...星联赛希望在以下三方面打造“最社交”的电竞赛事: 覆盖广:与星联赛联动的《王者荣耀》、《绝地求生·刺激战场》、《绝地求生·全军出击》以及《QQ飞车》四款移动端游戏,作为腾讯旗下关注度极高的游,自身已具备非常好的玩家覆盖面和游戏黏性...项目初期我们以代表空间品牌的核心图形——星星作为出发点开始构思,从星星形状中逐步提炼出等边三角、V等基础元素,这些简洁的元素可适配多样的组合方式,形成可关联的视觉符号贯穿到整体的设计之中。...logo整体以正六边作为稳定的外围框架,由一正一倒两个三角区域叠加构成。...图形以三角为基础,添加质感,折角由45°角相切而成,三角边框协调图标之间的平衡感,确保图标体量感统一。 ?

81320

七夕福利:程序员如何通过H5绘制手掌地图表白

,在地图右下角: [心岛]一直放大地图,找到西湖公园,可以看到现在心岛是绿色的(绿地)。...同理,我们还可以更改陆地的颜色或将“填充透明度”设为0%以增加与背景图的融合。...[54e06783bdc948caa2cdd04d59c8b4d8~tplv-k3u1fbpfcp-zoom-1.image]点击左上角的保存图标,并返回到上一页,发布我们刚才编辑的样式。...[6fc40c16808049809efe3ec7e51aa4d2~tplv-k3u1fbpfcp-zoom-1.image] 先初始化地图(页面背景图为的照片,中间层放的地图,顶层图是把手扣掉的png...marker.moveAlong一般用来做轨迹回放,这里用来从家移动到心小岛;map.easeTo可以使地图做平滑过渡的动画,这里一直放大地图到心完整显示。

82420

BCI competition IV 2b简介

该数据集采集了9名右利、视力正常或达到矫正后正常的实验者的脑电信号作为数据集。...对受试者要求: 1.要求受试者右利、视力正常或达到矫正后正常; 1.要求受试者坐在离电脑显示屏幕1米左右; 数据采集过程: 9名的受试者坐在离电脑显示屏幕大概 1 米的扶手座椅上进行数据采集。...在进行无反馈的运动想象脑电数据数据采集实验时,实验者被要求坐在距离显示屏幕前大概一米的位置上接受测试,在每次运动想象测试的最开始,屏幕上显示一个十字图标,在听到 70ms 的短音提示之后 1s,屏幕中的十字图标根据要进行的运动想象任务...(进行左手想象或者右手想象)的不同变成朝左或右的箭头图标,图案持续大约 1.25s 后,实验者根据这个提示在 3---7s 的时间段内进行运动想象,得到相应的运动想象数据,在这之后会有超过 1.5s 的休息时间

46810

BCI比赛数据集简介-BCI competition IV 2b

该数据集采集了9名右利、视力正常或达到矫正后正常的实验者的脑电信号作为数据集。...对受试者要求: 1.要求受试者右利、视力正常或达到矫正后正常; 1.要求受试者坐在离电脑显示屏幕1米左右; 数据采集过程: 9名的受试者坐在离电脑显示屏幕大概 1 米的扶手座椅上进行数据采集。...在进行无反馈的运动想象脑电数据数据采集实验时,实验者被要求坐在距离显示屏幕前大概一米的位置上接受测试,在每次运动想象测试的最开始,屏幕上显示一个十字图标,在听到 70ms 的短音提示之后 1s,屏幕中的十字图标根据要进行的运动想象任务...(进行左手想象或者右手想象)的不同变成朝左或右的箭头图标,图案持续大约 1.25s 后,实验者根据这个提示在 3---7s 的时间段内进行运动想象,得到相应的运动想象数据,在这之后会有超过 1.5s 的休息时间

1.3K20

基于Qt的流程设计器(一)

一:先来看一下界面的截图: 说明: 拖动节点的时候,与该节点相关的箭头连线也会跟着调整; 用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域点击一下,拖出的箭头消失) 这三个图标图标处于选中状态的时候...,节点可以拖动, 箭头图标处于选中状态的时候,可以使用鼠标绘制连线箭头 最后一个图标,用于在画布上创建一个节点方框 二: 关键代码文件如下图(用红框框住的为关键代码文件) 其他文件均为辅助代码文件(有些文件中的代码没有用到...那么箭头的终点应该在结束方框的下边框上 接下来是计算出箭头的两个点arrowP1和arrowP2 六: 绘制箭头的工作是在CustomArrow的paint函数中完成的,代码如下所示 箭头只不过是一个多边

1.5K60

Inverse kinematics tutorial

这次将尝试解释如何使用逆运动学的功能,同时建立一个7自由度冗余的机械。在本教程中,我们将构建一个非动态机械,它只使用逆运动学而不使用任何物理引擎功能。...形状划分算法通过将公共边连接的所有三角分组来操作。取决于原始网格是如何创建或导出的,这样的划分过程不能执行。...在这种情况下,将不得不在 triangle edit mode三角编辑模式中手动提取形状。 接下来,我们将改变各种对象的颜色,以获得一个良好的视觉外观。首先在场景树中双击一个形状图标。...现在你可以在关节属性对话框中调整关节大小(检查关节长度和关节直径)(你可以在场景层次中双击关节图标打开)。确保所有的关节都清晰可见。这是你应该拥有的: ? 下一步是对属于同一刚性实体的形状进行分组。...双击场景层次结构中的虚拟图标“redundantRob_tip"”:这会打开虚拟属性对话框。

1.3K30

pdf书籍笔记助手,BookxNote使用记录

1、逐个导入与批量导入 2、创建书架与子书架 3、将书籍移动到书架 4、书籍移动与重定位 5、设立工作目录 6、在笔记本中导入书籍 二、标注与摘录 1、创建摘录 2、标注 3、为标注添加更多内容 4、和文本...然后点击左上角的书籍图标,添加书籍。有两种添加模式,一种是从文件夹直接添加,另一种是从图书馆中已经添加的内容中添加。从文件夹中添加的内容不会出现在图书馆中。...4、和文本 即文档平移工具,在手模式下,我们可以鼠标右键+上下移动来移动文档位置。 在文本选择工具下,我们选中文字就会蹦出小的工具栏,提供高亮,下划线,标签和复制功能,效率非常高。...也可以把单词填入输入栏,然后点击右边的图标进行翻译。

1.9K30

这些小图标原来是这样做的

沙漏图标,靠近中心的移动点是通过锚点工具完成的。 ? 骷髅图标,钢笔工具、锚点工具和布尔运算绘制完成。 ? 磁铁图标,通过复制对象来切割末端, 使得笔画变粗,勾出笔画,最后,布尔运算操作完成。 ?...Infinity图标,在Illustrator中使用自定义画笔工具完成。 ? 火箭图标,通过锚点工具和布尔运算来完成。 ? iOS 11 App Store图标,布尔运算进行完成。 ?...盒子图标,路径选择工具和布尔运算进行完成。 ? 螺丝刀图标。手柄中的缺口是用多边工具创建的 (4边的多边是正方形!)。 ? 雨伞图标,布尔运算完成。 ? 风扇图标,路径选择工具和布尔运算完成。...更新图标,路径选择工具、布尔运算和锚点工具完成。 ? 刷新图标,锚点工具和路径选择工具完成。 ? 路径选择工具完成。 ? Penrose三角,通过路径选择工具和布尔运算完成。 ?...enrose三角。 将矩形旋转至-120º或120º, 然后固定到点,布尔运算进行完成。 ? 钢笔工具,布尔运算和路径选择工具完成。 ? 锚点工具和布尔运算进行完成。 ?

70920

css的cursor属性 鼠标指针样式

图标的格式根据不同的浏览器来分:IE支持 cur,ani,ico 这三种格式,FF支持 bmp,gif,jpg,cur,ico 这几种格式,所以一般使用 cur 或者 ico 格式的图片。...pointer 光标呈现为指示链接的指针(一只) move 此光标指示某对象可被移动。 text 此光标指示文本。 vertical-text 用于标示可编辑的垂直文本的光标。...no-drop 带有一个被斜线贯穿的圆圈的光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 not-allowed 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。...我是 cursor: no-drop 带有一个被斜线贯穿的圆圈的光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

3.1K00

使用html5 canvas绘制自定义多边动态能力分布图

1、首先是绘制多边,现在画布中心绘制圆形,然后在园中动态获取多边的顶点,然后使用lineTo()方法绘制正多边;效果图如下: ?...2、为了有层次感,需要再绘制两个小的正多边,而且这几个多边是需要有透明度的,如下图: ? 3、依次绘制对角线及最外层图标,如下图 ?...6,最后就是使用setTimeOut或者requestAnimationFrame实现动画效果; 存在问题: 1、当绘制图形为偶数边多边时,小图片下的介绍文字会显示不完全,如下图: ?...主要原因是偶数边多边能的图标有分布在canvas的正下方区域,解决办法是适当调整图标所在圆形的半径(iconsRadius)和中心三个多边的半径(polygons > radius); 2、绘制图在移动端会显示失真...,图标显示会稍微不清楚;如下图:暂时没有找到解决办法,看社区网友能否有好的解决方法。

2K20
领券