首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

CSS三角形及其原理

接下来是我学习CSS三角形原理的一点小总结。 其实使用CSS代码绘制三角形,只是对盒子模型中的”border”属性的简单应用。...border-bottom:0px; 4、由此我们不难得出CSS三角形所需的第一条结论:每条边(以黄色边为例)与其邻边所成夹角A,tanA=n/m(n,m分别为自己和邻边的宽度),当邻边宽度为0px...由此我们可以得出CSS三角形所需的第二条结论:当盒子模型中的内容(Content)+填充(Padding)的大小为0px时,Border边的形状将由梯形变为三角形。...以向上的底角45°的等腰三角形为例,由于tan(45°)=1,我们需将border-bottom、border-left、border-right三者设置为相等的宽度,并将border-left和border-right...: 10、其它三个朝向的三角形画法依此类推,四个朝向的三角形的完整代码如下: <!

73910

例图_uml活动图怎么

例分析可以认为是对系统功能的分解。 怎样确定例的粒度呢? 例的粒度(例的大小)可大可小,一般一个系统易控制在20个左右。例是系统级的抽象的描述,不是细化的(是做什么,非怎样做)。...每个例都有角色启动,除了包含和扩展例。 包含。 是指两个例之间的关系。...执行基本例的时候也可以执行被包含的例,被包含的例也可以单独执行。 如果一个例的功能太多时,可以包含关系建模成两个或多个小例 扩展。 也是指两个例之间的关系。...一个例可以被定义为基础例的增量的扩展,称作为扩展关系。扩展关系是把新的行为插入到已有的例中方法。基础例即使没有扩展例的执行不会涉及扩展例,只有在特定的条件发生,扩展例才被执行。...一个例和其几种情形的例间构成泛化关系。往往父例表示为抽象例。 任何父例出现的地方子例也可出现。 1 对例的描述。 例图:只能描述系统的大概功能,是一种视图。

1.9K20

canvas 转像素

几周前看到这个像素猫的效果,这个版本的实现原理是 box-shadow,我想到 grid 也可以实现一遍。接着发散到了“如何将任意图片像素化”上。...一开始的思路是如果还是 grid 或者 box-shadow 的方式,需要遍历图片上的每个像素,拿到坐标和像素值,这样就需要用到 canvas。...既然已经用到了 canvas… 其实就不用这么麻烦了,参考了 8-bit 的实现方法,可以 drawImage 方法,将缩小的图片放大,通过 ctx.imageSmoothing = false 禁用掉浏览器器对图片平滑处理...从前我 drawImage 基本画的都是媒体对象,这次的是个 canvas 对象,对这个用法还蛮新奇的。根据 MDN,这个函数的第一个参数可以是任何的 canvas 图像源: 绘制到上下文的元素。

1.6K20

代码时序图!YYDS

4.如何用PlantUMLUML例图 5.如何用plantUML思维导图 6.如何用planUML画出活动 最后 ---- 前言 最近通过代码来看看这个图,给大家看图、UML ,感觉很给大家分享...大家平时用他们出的图呢,是什么样的图,都用画图来的,我们画图来画图 呢draw.io?processOn 今天给大家介绍一款想要的作品,的画图,配合IDE使用PlantUML!...例图 什么是例图?...例图:例图(use case diagram)是用户与最常用的用户和表示,通过不同的关系。经常用图也和其他的图形来使用。 如何用 PlantUML UML 例图呢?...fc --> UC4:表示角色fc和例UC4关联起来,角色和例之间的关系-->用来表示。 5.如何用plantUML思维导图 什么是思想导图?

1.4K20

CSS小猪佩奇

—— Cristiano Bottlejiang 接下来,便是正式开工用CSS小猪佩奇了! · 预研 找了腾讯视频上面小猪佩奇第四季纸飞机一集11秒处的画面作为绘画模板。...· 难点 CSS是没法直接曲线的,曲线救国的办法就是 border-radius。后面整个绘画都是围绕这个属性展开。...[ 椭圆 ] [ 曲线 ] · 猪头 了解了 border-radius 的用法之后就可以开始实战了。...通过对线条的分段,猪头如下图拼凑而成,同时要注意图层的层级,以及白色背景和粉色背景来交叉覆盖填补画面。难的在于头部大轮廓的 border-radius 参数设置。...大体绘画步骤如下: 椭圆; 调 border-radius 参数; 上色; 调角度; 图层遮盖补充。 [ 猪头 ] 猪头轮廓样式代码: 嘴巴 三个半椭圆依次叠加即可~同样是图层遮盖来实现。

1.1K50
领券