CSS中的路径裁剪样式clip-path的详细使用

最新推荐文章于 2024-06-05 11:06:09 发布
最新推荐文章于 2024-06-05 11:06:09 发布
阅读量1.6k 收藏 6
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932157/article/details/105608599
版权

看html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <style>

        .outer {
            width: 100px;
            height: 100px;
            background: orange;
            clip-path: circle(50% at 50% 50%)
        }
    </style>

    <div class="outer" style="float:left;"></div>
    <div style="float:left;margin-left:20px;">
        <select name="tx">
            <option value="0">请选择图形</option>
            <option value="圆形">圆形</option>
            <option value="椭圆">椭圆</option>
            <option value="矩形">矩形</option>
            <option value="三角形">三角形</option>
            <option value="菱形">菱形</option>
            <option value="梯形">梯形</option>
            <option value="平行四边形">平行四边形</option>
            <option value="五边形">五边形</option>
            <option value="六边形">六边形</option>
            <option value="七边形">七边形</option>
            <option value="八边形">八边形</option>
            <option value="斜角">斜角</option>
            <option value="槽口">槽口</option>
            <option value="左箭头">左箭头</option>
            <option value="右箭头">右箭头</option>
            <option value="星星">星星</option>
            <option value="十字架">十字架</option>
            <option value="叉号">叉号</option>
            <option value="对话框">对话框</option>
            <option value="鼠标移入时开始变形">鼠标移入时开始变形</option> 
        </select>
    </div>
    <script  src="js/jquery-2.1.0.js"></script>
    <link href="css/txcss.css" rel="stylesheet" />
    <script  src="js/txjs.js"></script>
</body>
</html>

css代码：

/*圆形*/
.circle {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: circle(50% at 50% 50%)
}
/*椭圆形*/
.ellipse {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: ellipse(25% 40% at 50% 50%);
}
/*矩形*/
.inset {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: inset(5% 20% 15% 10%);
}
/*三角形*/
.sanjiaoxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/*菱形*/
.lingxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/*梯形*/
.tixing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
/*平行四边形*/
.sibianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
/*五边形*/
.wubianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/*六边形*/
.liubianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
 
/*七边形*/
.qibianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
/*八边形*/
.babianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
/*斜角*/
.xiejiao {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
/*凹槽*/
.aocao {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
/*左箭头*/
.zuojiantou {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
}
/*右箭头*/
.youjiantou {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
 
/*星星*/
.xingxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/*十字架*/
.shizijia {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
}
/*叉号*/
.Xhao {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/*对话框*/
.duihuakuang {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
/*变形*/
.bianxing {
    width: 100px;
    height: 100px;
    background: orange;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    transition: .5s clip-path;
}

.bianxing:hover {
    clip-path: polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);
}

js代码：

; (function () {
    //代码块
    $(".outer").addClass("circle");
    var getcss = ["circle", "ellipse", "inset", "sanjiaoxing", "lingxing", "tixing", "sibianxing", "wubianxing", "liubianxing", "qibianxing", "babianxing", "xiejiao", "aocao", "zuojiantou", "youjiantou", "xingxing", "shizijia", "Xhao", "duihuakuang", "bianxing"];
    function gtc(name) {
        for (var i = 0; i < getcss.length; i++) {
            if (getcss[i] != name) {
                $(".outer").removeClass(getcss[i]);
            }
        }
    }
    $("select[name='tx']").change(function () {
        if (this.value == "圆形") {
            gtc("circle");
            $(".outer").addClass("circle");
        } else if (this.value == "椭圆") {
            gtc("ellipse");
            $(".outer").addClass("ellipse");
        } else if (this.value == "矩形") {
            gtc("inset");
            $(".outer").addClass("inset");
        } else if (this.value == "三角形") {
            gtc("sanjiaoxing");
            $(".outer").addClass("sanjiaoxing");
        } else if (this.value == "菱形") {
            gtc("lingxing");
            $(".outer").addClass("lingxing");
        } else if (this.value == "梯形") {
            gtc("tixing");
            $(".outer").addClass("tixing");
        } else if (this.value == "平行四边形") {
            gtc("sibianxing");
            $(".outer").addClass("sibianxing");
        } else if (this.value == "五边形") {
            gtc("wubianxing");
            $(".outer").addClass("wubianxing");
        } else if (this.value == "六边形") {
            gtc("liubianxing");
            $(".outer").addClass("liubianxing");
        } else if (this.value == "七边形") {
            gtc("qibianxing");
            $(".outer").addClass("qibianxing");
        } else if (this.value == "八边形") {
            gtc("babianxing");
            $(".outer").addClass("babianxing");
        } else if (this.value == "斜角") {
            gtc("babianxing");
            $(".outer").addClass("xiejiao");
        } else if (this.value == "槽口") {
            gtc("babianxing");
            $(".outer").addClass("aocao");
        } else if (this.value == "左箭头") {
            gtc("babianxing");
            $(".outer").addClass("zuojiantou");
        } else if (this.value == "右箭头") {
            gtc("babianxing");
            $(".outer").addClass("youjiantou");
        } else if (this.value == "星星") {
            gtc("babianxing");
            $(".outer").addClass("xingxing");
        } else if (this.value == "十字架") {
            gtc("shizijia");
            $(".outer").addClass("shizijia");
        } else if (this.value == "叉号") {
            gtc("Xhao");
            $(".outer").addClass("Xhao");
        } else if (this.value == "对话框") {
            gtc("duihuakuang");
            $(".outer").addClass("duihuakuang");
        } else if (this.value == "鼠标移入时开始变形") {
            gtc("bianxing");
            $(".outer").addClass("bianxing");
        }
    });
})();

效果展示：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

你的美，让我痴迷
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
巧妙运用clip-path，实现CSS形状变换
qiancheng9998的博客
04-28 934
CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的方法，连接坐标绘制掩码区域，就可以做出许多不同的形状，让底色或底图显现，随着浏览器对于CSS3的支持度大幅提升，自然而然的就可以用它来做些与众不同的变化。 运用clip-path超强的网站 最先看到这个属性的应用，是从这个网站看到的：species-in-pieces.com...
css实现切角效果
weixin_47055226的博客
06-28 479
css实现切角效果 html代码 <div class="addState" v-show="isAdd"> ...... </div> css代码 /* 实现四个边角切割 */ clip-path: polygon(15px 0px, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%,0 calc(100% - 15px),0 15
【CSS】clip-path 属性详解
最新发布
正在解锁骑着骆驼去南极的世界
06-05 546
clip-path 属性用于在 SVG 和 HTML 中创建复杂的裁剪区域（即剪切路径），从而只显示元素的一部分。
css clip-path
CamilleZJ的博客
01-04 1380
clip-pathCSS属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。和canvas和svg的剪裁很像。 取值 <clip-source>：用<url>表示剪切元素的路径 <basic-shape>：一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框 <geometry-box>：如果同<basic-shape>一起声明，它将为基本形状提供相应的参考框盒。通过自定...
css3的clip-path方法剪裁实现
aau88497的博客
11-15 365
本例讲解如何通过clip-path把一个div（元素，可以是图片等）裁切成不同的形状，这里以一个div为例宽高均为300px 注意：不支持IE和Firefox，支持webkit浏览器，在现代浏览器中需要使用-webkit-前缀。 <div class="demo" style="width: 300px; height: 300px; margin: auto; backgro...
css clip-path裁剪形状，实现绘制常用的形状和图形。反向裁剪
PrimaryColor
06-16 2788
效果图： 图1： 图2： 图3： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
css通过clip-path实现裁剪
xuefeng11111的博客
07-22 803
css实现渐变三角
CSS中的clip-path区域裁剪属性使用教程
12-13
CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。 CSS Code复制内容到剪贴板 .clip-me {  /* 已被标志为不推荐使用的写法 */  position: absolute; /* 需要 absolute 和...
CSS中clip-path属性的使用详解
09-22
在CSS中，`clip-path`属性是一个非常强大的工具，它允许开发者通过定义形状来裁剪元素的可见区域，从而创造出各种独特的视觉效果。这个属性可以用于网页设计中的图像、按钮、背景等元素，以实现非传统形状的布局。在...
CSS3中的clip-path使用攻略
09-25
在CSS3中，`clip-path`是一个非常强大的属性，用于通过定义路径来裁剪元素的可见区域。它允许开发者创建各种复杂的形状，如圆形、椭圆、多边形等，为网页设计添加独特的视觉效果。尽管`clip-path`在所有主流浏览器中...
裁剪路径css,CSS中的路径裁剪样式clip-path
weixin_31306591的博客
08-03 311
前面的话CSS借鉴了SVG裁剪的概念，设置了clip-path样式，本文将详细介绍路径裁剪clip-path概述clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法[注意]IE浏览器不支持，且低版本webkit内核浏览器需要添加-webkit-前缀【clip-path】值: | [ || ...
css的clip-path学习
snoto的专栏
05-11 615
由此知道，设置的三个点，第一个是【x轴的50%，y轴的0%处】，第二个是【x轴和y轴的100%，也就是原图的右下角】，第三个是【x轴的0%，y轴的100%处，也就是原图的左下角】首先要有一个概念：原图的左上角坐标是(0,0)，右下角坐标是（100%,100%），后面的值都是在这个基础上设置的。x轴半径为x轴的20%，y轴半径为y轴的50%，圆心在于原图的【x轴的50%，y轴的50%处】。半径为30%，圆心在于原图的【x轴的20%，y轴的20%处】。四个值的话，就是左上，右上，右下，左下的圆角度数。
css 剪辑图片_CSS中的clip-path裁剪图片用法
weixin_39638603的博客
12-30 220
CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。在过去有个等效的属性， clip，但在新的CSS规范中，它已经被标志为deprecated，用新的clip-path代替。.clip-me {/* 已被标志为不推荐使用的写法 */position: absolute; /* 需要 absolute 和 fixed 定位 */clip: rect(110px, 1...
超级好用的css属性——clip-path
有事儿私信。
09-11 6264
clip-path是CSS3中的一个属性，用于在元素上创建一个裁剪区域，以显示元素的一部分。它允许您选择性地显示元素的某个部分，而隐藏其他部分。clip-path属性可以用于各种形状和图像，包括矩形、圆形、多边形和SVG图形等。
css属性clip-path裁剪和linear-gradient渐变
m0_47480813的博客
01-18 372
.circle { float: left; width: 200px; height: 200px; margin: 20px; background: linear-gradient(to left, red, blue); clip-path: circle(50% at 50% 50%); } .ellipse { float: left; width: 200px...
clip-path介绍各图形绘制
細水、長流√的专栏
03-01 456
简介兼容性基本语法语法详解基本图形：inset基本图形：circle基本图形：ellipse基本图形：polygon使用示例圆形裁剪椭圆裁剪矩形裁剪多边形裁剪三角形菱形梯形平行四边形五边形六边形七边形八边形特殊图形裁剪斜角槽口左箭头右箭头星星十字架叉号对话框变形clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。
css clip-path画带边框梯形多边形
weixin_42254016的博客
04-01 6945
css clip-path画带边框梯形多边形项目案例一（自适应梯形）项目案例二（渐变色多边形） 项目案例一（自适应梯形） 如下梯形区域为模块的title信息，要求title文字个数变化时梯形区域随之变化 实现方法： 两个div嵌套，外层div加背景色，然后使用polygon()多边形函数来指定一个梯形 内层div指定梯形时坐标点与外层相差一个像素，达到边框效果（直接对外层div加border只会...
css clip-path path
01-07
CSS的clip-path属性用于创建元素的可显示区域，可以通过裁剪方式来显示区域内的部分，而隐藏区域外的部分。clip-path属性的基本语法如下： ```css clip-path: clip-source | basic-shape | geometry-box | none; ``` 其中，clip-source可以是以下几种类型之一： 1. URL：可以使用SVG图像作为裁剪路径。例如： ```css clip-path: url(path/to/clip-path.svg); ``` 2. 基本形状（basic-shape）：可以使用基本形状来定义裁剪路径。基本形状包括矩形（rectangle）、椭圆（ellipse）、圆（circle）、多边形（polygon）等。例如： ```css clip-path: circle(50% at 50% 50%); ``` 3. 几何框（geometry-box）：可以使用元素的边界框或者视口的边界框作为裁剪路径。例如： ```css clip-path: padding-box; ``` 4. none：表示不进行裁剪，元素将完全显示。 下面是一个使用clip-path属性的示例： ```css div { width: 200px; height: 200px; background-color: red; clip-path: circle(50% at 50% 50%); } ``` 以上代码将创建一个宽高为200px的红色正方形，并将其裁剪为一个圆形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美，让我痴迷

你的好，我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值