css:clip-path

拉不动的猪

2023-03-13 帮助33人

前言

这几天偶然间看到别的大神创作了有趣的css动画，然后看到了他们在使用css时添加了自己不常用得属性clip -path，今天就简单的浅学下。

MDN简介

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

clip-path的一般值

inset() (en-US)
定义一个 inset 矩形。
circle() (en-US)
定义一个圆形（使用一个半径和一个圆心位置）。
ellipse() (en-US)
定义一个椭圆（使用两个半径和一个圆心位置）。
polygon() (en-US)
定义一个多边形（使用一个 SVG 填充规则和一组顶点）。
path() (en-US)
定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。

先来个简单的定义一个圆形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
        -webkit-clip-path: circle(50% at 50% 50%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下：

学新通技术网

at 代表圆形的位置 50% 50% 代表元素上下左右中间点，at之前的数值代表远的半径大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
        -webkit-clip-path: circle(30% at 50% 50%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

现在的半径是之前的60%,大小如下，额，粘贴效果不是很明显：

学新通技术网

注意： at 后的第一个50% 代表x轴第二个50%代表y轴 x:100%代表最右侧，y:100%代表最底端

接下来我们就用这个circle画一个扇形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
        -webkit-clip-path: circle(50% at 100% 100%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下:

学新通技术网

是不是很简单，只需要把圆形定位在最右侧和最底部，然后以半径为50%，轻轻松松拿下一个圆。

简单的画个矩形

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
        clip-path: inset(0% 0 0% 0 round 0 0% 0 0%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下：

学新通技术网

insert对应的含义如下：

inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>)

那就简单的尝试下画个叶子吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
        clip-path: inset(26% 25% 25% 25% round 0% 25% 0% 25%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下：

学新通技术网

polygon这个比较麻烦点，经常用来绘画各种奇特的对边形

简单的来一个五角星，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
       clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下：

学新通技术网

本人比较懒，这些值没计算，直接从网上拿来的，这里解释下：

其实很简单，大家可以查下，五角星一共是十个点，所以polygon对应十个坐标就可以了，不用在意器值得先后顺序。

学新通技术网

依然是之前得十个值，当我们打乱其顺序时，结果依旧不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
       clip-path: polygon(100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%,50% 0%, 63% 38%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果还是那样

学新通技术网

ellipse

这个就简单了，它是用来绘制椭圆的

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
       clip-path: ellipse(40% 20% at 50% 50%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下：

学新通技术网

和circle一样，at后面的值依然是表示圆形的位置，前两个值表示x轴的半径和y轴的半径

我们把它立起来看下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #test {
        width: 200px;
        height: 200px;
        background-color: #2bb6f0;
       clip-path: ellipse(20% 50% at 50% 50%);
    }
</style>
<body>
<div id="test"></div>
</body>
</html>

效果如下：

学新通技术网

最后

今天本来是不想写的，周一就是那么的慵懒，但是闲来无事也只能打发下时间写了下，如果对你有用，就点个赞吧

这篇好文章是转载于：学新通技术网

css:clip-path

前言

MDN简介

先来个简单的定义一个圆形：

简单的画个矩形

polygon这个比较麻烦点，经常用来绘画各种奇特的对边形

ellipse

最后

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐