clip-path实现图片边角的裁剪

于 2024-08-22 17:55:37 发布
阅读量115 收藏
点赞数 3
文章标签： javascript 开发语言 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/savealllive/article/details/141434308
版权 
img {
        clip-path: polygon(
          0 7px,
          7px 0,
          calc(100% - 20px) 0,
          100% 20px,
          100% 100%,
          16px 100%,
          0 calc(100% - 16px)
        );
      }

每一个逗号隔开的就是路径坐标 左上角的两个点 0 7px ，7px 0
右上角 calc(100% - 20px) 0,100% 20px
相当于通过这些点练成的线的圈起来的部分就是剩下的图片
在这里插入图片描述

savealllive
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS使用clip-path绘制一个不规则边框
pnjtvxcp的博客
06-19 3995
简介 clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。 ...
html知识点之利用css四边形切角并且加上边框
小糖豆
09-14 4285
前言 这几个月做了很多前端工作，其中一个需求还是蛮头疼，UI给的图上面的四边形是一个带斜边的，直接用背景图可以实现，但是会出现各种布局的问题，比如内容太大了，边框不会跟着扩大，废话不多说，这里写一些如何利用css话四边形带有斜边，并且给斜边加边框，在这之前，先简单说一下需要用到的函数 linear-gradient()函数 #grad { background-image: linear-gradient(red, yellow, blue); } 看上面的代码是从头部开始的线性渐变，从红色开始，转为
CSS中的clip-path区域裁剪属性使用教程
12-13
CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。 CSS Code复制内容到剪贴板 .clip-me {              /* 已被标志为不推荐使用的写法 */     position: absolute; /* 需要 absolute 和 fixed 定位 */     clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */     /* 值描述的是一个 top/left 点和一个 bottom/right 点 */     
Clip-path实现按钮流动边框动画
苏苏就是小苏苏的博客
02-11 1479
👏Clip-path实现按钮流动边框动画，速速来Get吧~🥇文末分享源代码
web前端之css实现缺角功能、clip-path属性、形状、渐变、旋转、矩形、边框、折角
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-13 2229
web前端之css实现缺角功能、clip-path属性、形状、渐变、旋转、矩形、边框、折角
clip-path画图形
A20190518的博客
06-07 433
通过加背景色，先画外圈，再画内圈，实现只留有边框长度的样式。clip-path可截取不规则图形。
2. 绘制多边形 — clip-path 属性(补充多边形设置圆角border-radius)
qq_51644044的博客
03-30 1701
clip-path属性是一个用来定义剪切元素可见部分的 CSS 属性。通过clip-path属性，你可以创建各种形状的剪切区域，从而实现不同的视觉效果。
CSS clip-path：探索形状裁剪的艺术
最新发布
07-24
### CSS `clip-path`: 探索形状裁剪的艺术 ...无论是创建独特的图像裁剪还是实现复杂的动画效果，`clip-path` 都将成为开发者工具箱中的重要工具之一。此外，随着 Web 浏览器的支持不断改进，未来的可能性将更加广阔。
CSS中clip-path属性的使用详解
12-14
通过动态改变`clip-path`的值，可以实现动态效果，增强用户体验。 需要注意的是，`clip-path`属性不会影响元素的盒模型，即不会改变元素占用的空间，只是控制了可视区域。此外，`clip-path`在某些旧版本浏览器中...
使用clip-path裁剪图形
weixin_41897680的博客
01-06 2412
推荐（参考文章） clip-path介绍 利用 clip-path 实现动态区域裁剪 基本内容 clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切 clip属性。 常用属性值 clip-source ： 用 URL 表示剪切元素的路径 basic-shape：将元素裁剪为基本形状：矩形（inset ）、圆形（circ
CSS中的路径裁剪样式clip-path
weixin_33805992的博客
09-12 318
前面的话 　　CSS借鉴了SVG裁剪的概念，设置了clip-path样式，本文将详细介绍路径裁剪clip-path   概述 　　clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法 　　[注意]IE浏览器不支持，且低版本webkit内核浏览器需要添加-webkit-前缀 【clip...
【CSS3】clip-path属性深入理解与使用
細水、長流√的专栏
03-01 1402
定义：clip-path: inset(, ,,, ），括号内的值类似于margin、padding值的写法，可以写一个值，也可以写多个值。3.　ellipse；
觉得自己的页面不够花哨吗，试试clip-path吧
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-12 354
最近在尝试一些风格化的css，于是开始注意起了一些平常写业务时不太关注的css属性。今天给大家介绍一下clip-path这个属性。以及能用它实现什么效果。效果首先让我们看看效果1. 赛博朋克风边框image.png代码：codepen.io/1171326722/…[1]2.赛博朋克风格按钮代码：codepen.io/1171326722/…[2]3.旋转边框代码：cod...
你可能还不知道的CSS好用属性：clip-path
sybh的博客
11-08 1720
你是不是还在用这种方式，利用 border 的 color 属性来实现三角形。今天给大家介绍一个 css 中的一个不是很常用的属性clip-path来实现一个三角形。
css的clip-path学习
snoto的专栏
05-11 691
由此知道，设置的三个点，第一个是【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%处】。四个值的话，就是左上，右上，右下，左下的圆角度数。
圆点围绕圆旋转---css3
热门推荐
前端小菜
08-23 1万+
Document *{ margin: 0; padding: 0; } .box{ position: relative; width: 300px; height: 300px; border: 5px solid deepskyblue; border-radius: 50%; } .box i{ display: bl
css写多边形边框(clip-path)
qq_39273423的博客
04-23 2441
css写多边形边框(clip-path) 效果图 css样式 .box-ticket { padding: 0.1vw 0.1vw 0.1vw 0.1vw; background-color: #3f78c5; clip-path: polygon(0% 0%, 11.7vw 0, 13.7vw 1.5vw, 100% 1.5vw, 100% 100%, 0% 100%); } .left-box-ticket { width: 28vw;
html带边框的六边形,clip-path与伪元素结合绘制带边框的六边形
weixin_35906794的博客
06-21 512
京东的效果自己实现的效果html代码：样式less代码：.genpolygon(@outwid,@inwid){width:@outwid*0.9;height:@outwid;background-color:rgb(224,17,33);clip-path:polygon(025%,50%0,100%25%,100%75%,50%100%,075%);po...
clip-path的神奇妙用
Web_boom的博客
05-23 1744
大家好，我叫小杜杜，我们知道构成前端的三大语言有：html、css和js，其中最为神秘的便是css，为什么这么说呢？自从动画、过度等属性的出现，可以说只有你想不到，就没有做不到～ 今天来看看一个特别神奇的属性：clip-path clip-path clip-path：裁剪，新的裁剪，与clip相同，只不过clip是老裁剪，并且要absolute和fixed定位元素才能使用，并且智能裁剪正方形，这里就不多做赘述，我们直接看clip-path就行 clip-path对元素的定位没有要求，而且也能裁剪更多的元素
clip-path多种方式一起实现裁剪
11-23
以下是使用clip-path多种方式一起实现裁剪的例子： ```html <div class="clip-path-demo"> ``` ```css .clip-path-demo { width: 200px; height: 200px; background: url('path/to/image.jpg'); -webkit-clip-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值