CSS3:绘制多边形

**clip-path:**该属性使用裁剪方式创建元素的可显示区域,区域内的显示,区域外的不显示。

构建一个三角形

javascript 复制代码
   <div class="mybox"></div>
    <style>
        .mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: polygon(0% 0%,100% 0%,0% 100%);
}
    </style>

该属性的使用:

属性值可以是函数:

circle:绘制圆

ellipse:绘制椭圆

polygon:绘制多边形

path: 用来定义形状的通用元素,所有的基本形状都可以用path来创建,是一种svg路径。

  • circle

只指明半径,其中半径可以是百分比或者是数值,此时圆心默认为元素中心

javascript 复制代码
.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: circle(50%);
}

指明圆心,使用at标识符

此时,可以绘制圆的任意部分

javascript 复制代码
.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: circle(50% at 100% 100%);
}

使用场景:需要绘制与圆弧相关的图形

  • ellipse
    需要同时指明横轴、竖轴、以及轴中心
    第一个参数表示横轴长度,第二个参数表示竖轴长度
    轴中心使用坐标表示,与横竖轴之间使用at连接

比如:

javascript 复制代码
.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: ellipse(50% 100% at 100% 100%);
}

其实只要合理运用横竖轴的长度,其作用还可以类比于圆的功能

使用场景:绘制有圆弧的图形

  • polygon
    由于多边形是由点线组成,如果需要形成一个图形,至少需要三个点构成一个面,点之间相互连接
javascript 复制代码
.mybox {
    width: 100px;
    height: 100px;
    background-color: yellow;
    clip-path: polygon(0% 0%,100% 0%,0% 100%);
}

使用场景:需要绘制线条形状的图形

path

类似canvas绘图

用一串字符串来表示,其中常用的参数有:

moveTo(m|M)

表明鼠标抬起,需要落到的点,不会绘制线条,只用于改变画笔的位置。如果最开始绘制的时候不指明,则默认是上一个点的位置

LineTo(L|l)

画笔需要到达的下一个点的位置,会绘制线条,上一个点与当前所处的点会连接成一条线。

ClosePath(z|Z)

从当前点到第一个点绘制一条线,主要用于闭合所绘制的图形。

以上参数一般使用其的缩写,但是有一点需要注意的是,除了(z|Z)外,参数大小写敏感

大写字母表示绝对位置,小写字母表示相对位置,相对于上一个点的位置。

例子:绘制一个T形

javascript 复制代码
.mybox {
    width: 600px;
    height: 600px;
    background-color: yellow;
    clip-path: path('M 100 100 L 400 100 L 400 200 L 275 200 L 275 500 L 225 500 L 225 200 L 100 200 z');
}
相关推荐
用户214118326360211 分钟前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒21 分钟前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel11 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化