clip-path画图形

已于 2023-06-08 16:11:04 修改
阅读量359 收藏 2
点赞数 1
文章标签： css
于 2023-06-07 18:44:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A20190518/article/details/131093816
版权

clip-path可截取不规则图形
clip-path

<div
	class="panel-container"
	style="width: 300px;height: 300px;margin: 50px auto;">
</div>

通过加背景色，先画外圈，再画内圈，实现只留有边框长度的样式

<style lang="scss" scoped>
$--cornerGap: 16px; /* 角落空隙长度，（宽高的长度 不是斜边的长度） */
$--border: 1px; /* 边框 */
.panel-container {
  position: relative;
  margin: 16px;
  padding: 16px;
}
.panel-container::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3972b0;

  clip-path: polygon(
    0 0,
    calc(100% - $--cornerGap) 0,
    100% $--cornerGap,
    100% calc(100% - $--cornerGap),
    calc(100% - $--cornerGap) 100%,
    $--cornerGap 100%,
    0 calc(100% - $--cornerGap),
    0 0,

    $--border 0,
    $--border calc(100% - $--cornerGap),
    $--cornerGap calc(100% - $--border),
    calc(100% - $--cornerGap) calc(100% - $--border),
    calc(100% - $--border) calc(100% - $--cornerGap),
    calc(100% - $--border) $--cornerGap,
    calc(100% - $--cornerGap) $--border,
    $--border $--border,
  );
}
</style>

更加复杂的边框

更加复杂的clip-path

$--cornerGap: 16px; /* 角落空隙长度(宽高的长度,不是斜边的长度) */
$--border: 1px; /* 边框 */
$--concaveLength: 88px; /* 凹陷长度,外侧长度,且不包含gap */
$--concaveBottomLength: 148px; /* 底部凹陷长度,外侧长度,且不包含gap */
$--slopeWidth: 8px; /* 凹陷斜角长度(宽高的长度,不是斜边的长度) */
$--gap: 2px; /* 凹陷内容和边框线的距离 */
.panel-container {
  position: relative;
  margin: 16px;
  padding: 16px;
}
.panel-container::before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3972b0;

  clip-path: polygon(
    0 0,
    calc(100% - $--cornerGap) 0,
    100% $--cornerGap,
    100% calc(50% - $--concaveLength/2 - $--gap),
    calc(100% - $--slopeWidth) calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    calc(100% - $--slopeWidth) calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    100% calc(50% + $--concaveLength/2 + $--gap),
    100% calc(100% - $--cornerGap),
    calc(100% - $--cornerGap) 100%,
    calc(50% + $--concaveBottomLength/2 + $--gap) 100%,
    calc(50% + $--concaveBottomLength/2 + $--gap - $--slopeWidth) calc(100% - $--slopeWidth),
    calc(50% - $--concaveBottomLength/2 - $--gap + $--slopeWidth) calc(100% - $--slopeWidth),
    calc(50% - $--concaveBottomLength/2 - $--gap) 100%,
    $--cornerGap 100%,
    0 calc(100% - $--cornerGap),
    0 calc(50% + $--concaveLength/2 + $--gap),
    $--slopeWidth calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    $--slopeWidth calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    0 calc(50% - $--concaveLength/2 - $--gap),
    0 0,

    $--border 0,
    $--border calc(50% - $--concaveLength/2 - $--gap),
    calc($--slopeWidth + $--border) calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    calc($--slopeWidth + $--border) calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    $--border calc(50% + $--concaveLength/2 + $--gap),
    $--border calc(100% - $--cornerGap),
    $--cornerGap calc(100% - $--border),
    calc(50% - $--concaveBottomLength/2 - $--gap) calc(100% - $--border),
    calc(50% - $--concaveBottomLength/2 - $--gap + $--slopeWidth) calc(100% - $--slopeWidth - $--border),
    calc(50% + $--concaveBottomLength/2 + $--gap - $--slopeWidth) calc(100% - $--slopeWidth - $--border),
    calc(50% + $--concaveBottomLength/2 + $--gap) calc(100% - $--border),
    calc(100% - $--cornerGap) calc(100% - $--border),
    calc(100% - $--border) calc(100% - $--cornerGap),
    calc(100% - $--border) calc(50% + $--concaveLength/2 + $--gap),
    calc(100% - $--slopeWidth - $--border) calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    calc(100% - $--slopeWidth - $--border) calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    calc(100% - $--border) calc(50% - $--concaveLength/2 - $--gap),
    calc(100% - $--border) $--cornerGap,
    calc(100% - $--cornerGap) $--border,
    $--border $--border,
  );
}

每条边框上加装饰 background-image可同时添加多个图片

边框上加装饰

<style lang="scss">
$--cornerGap: 16px; /* 角落空隙长度(宽高的长度,不是斜边的长度) */
$--border: 1px; /* 边框 */
$--concaveLength: 88px; /* 凹陷长度,外侧长度,且不包含gap */
$--concaveBottomLength: 148px; /* 底部凹陷长度,外侧长度,且不包含gap */
$--slopeWidth: 6px; /* 凹陷斜角长度(宽高的长度,不是斜边的长度) */
$--gap: 4px; /* 凹陷内容和边框线的距离 */
.panel-container {
  position: relative;
  margin: 16px;
  padding: 16px;
}
.panel-container::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-image:
    url("../assets/images/adornborder-left.png"),
    url("../assets/images/adornborder-bottom.png"),
    url("../assets/images/adornborder-right.png");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left center, bottom center, right center;
}
.panel-container::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #3972b0;

  clip-path: polygon(
    0 0,
    calc(100% - $--cornerGap) 0,
    100% $--cornerGap,
    100% calc(50% - $--concaveLength/2 - $--gap),
    calc(100% - $--slopeWidth) calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    calc(100% - $--slopeWidth) calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    100% calc(50% + $--concaveLength/2 + $--gap),
    100% calc(100% - $--cornerGap),
    calc(100% - $--cornerGap) 100%,
    calc(50% + $--concaveBottomLength/2 + $--gap) 100%,
    calc(50% + $--concaveBottomLength/2 + $--gap - $--slopeWidth) calc(100% - $--slopeWidth),
    calc(50% - $--concaveBottomLength/2 - $--gap + $--slopeWidth) calc(100% - $--slopeWidth),
    calc(50% - $--concaveBottomLength/2 - $--gap) 100%,
    $--cornerGap 100%,
    0 calc(100% - $--cornerGap),
    0 calc(50% + $--concaveLength/2 + $--gap),
    $--slopeWidth calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    $--slopeWidth calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    0 calc(50% - $--concaveLength/2 - $--gap),
    0 0,

    $--border 0,
    $--border calc(50% - $--concaveLength/2 - $--gap),
    calc($--slopeWidth + $--border) calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    calc($--slopeWidth + $--border) calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    $--border calc(50% + $--concaveLength/2 + $--gap),
    $--border calc(100% - $--cornerGap),
    $--cornerGap calc(100% - $--border),
    calc(50% - $--concaveBottomLength/2 - $--gap) calc(100% - $--border),
    calc(50% - $--concaveBottomLength/2 - $--gap + $--slopeWidth) calc(100% - $--slopeWidth - $--border),
    calc(50% + $--concaveBottomLength/2 + $--gap - $--slopeWidth) calc(100% - $--slopeWidth - $--border),
    calc(50% + $--concaveBottomLength/2 + $--gap) calc(100% - $--border),
    calc(100% - $--cornerGap) calc(100% - $--border),
    calc(100% - $--border) calc(100% - $--cornerGap),
    calc(100% - $--border) calc(50% + $--concaveLength/2 + $--gap),
    calc(100% - $--slopeWidth - $--border) calc(50% + $--concaveLength/2 + $--gap - $--slopeWidth),
    calc(100% - $--slopeWidth - $--border) calc(50% - $--concaveLength/2 - $--gap + $--slopeWidth),
    calc(100% - $--border) calc(50% - $--concaveLength/2 - $--gap),
    calc(100% - $--border) $--cornerGap,
    calc(100% - $--cornerGap) $--border,
    $--border $--border,
  );
}
</style>
出太阳下雨�
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF获得PNG图片外观Path数据.docx
07-17
Path 数据在 WPF 中有很多应用，例如，可以使用 Path 数据来绘制图形，或者使用 Path 数据来定义控件的形状等等。Path 数据的应用非常广泛，可以满足各种不同的需求。 五、结论 通过使用 PS 和 Blend 工具，可以...
使用css3绘制出各种几何图形
09-27
除此之外，CSS3还提供了许多其他图形绘制功能，如`clip-path`用于剪裁元素形状，`mask`用于元素的遮罩效果，以及`polygon()`函数用于创建自定义的多边形。这些工具结合使用，可以创造出更加复杂且富有创意的图形设计...
css clip-path画带边框梯形多边形
weixin_42254016的博客
04-01 6832
css clip-path画带边框梯形多边形项目案例一（自适应梯形）项目案例二（渐变色多边形） 项目案例一（自适应梯形） 如下梯形区域为模块的title信息，要求title文字个数变化时梯形区域随之变化 实现方法： 两个div嵌套，外层div加背景色，然后使用polygon()多边形函数来指定一个梯形 内层div指定梯形时坐标点与外层相差一个像素，达到边框效果（直接对外层div加border只会...
CSS使用clip-path绘制一个不规则边框
pnjtvxcp的博客
06-19 3818
简介 clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。 ...
2. 绘制多边形 — clip-path 属性(补充多边形设置圆角border-radius)
最新发布
qq_51644044的博客
03-30 925
clip-path属性是一个用来定义剪切元素可见部分的 CSS 属性。通过clip-path属性，你可以创建各种形状的剪切区域，从而实现不同的视觉效果。
Clip-path实现按钮流动边框动画
苏苏就是小苏苏的博客
02-11 1382
👏Clip-path实现按钮流动边框动画，速速来Get吧~🥇文末分享源代码
css实现缺角功能、形状、渐变、旋转、clip-path属性、矩形、边框、折角
04-13 1861
css实现缺角功能、形状、渐变、旋转、clip-path属性、矩形、边框、折角
css3-clip-path 绘制多边形
lanbaiyans的博客
04-26 202
【代码】css3-clip-path 绘制多边形。
android学习笔记--clip参照.pdf
12-08
但是，在 Android 上是对 Canvas 上进行 Clip 的，要在画图之前对 Canvas 进行 Clip，如果画图之后再对 Canvas 进行 Clip 不会影响到已经画好的图形。 Android 提供了三种 Clip 方式：clipRect、clipPath 和 ...
C#图形区域剪切的实现方法
09-03
通过调整`GraphicsPath`中的形状、`Region`对象的构造方式以及对`Graphics`对象的`Clip`属性的设置，你可以创建出更加复杂和灵活的图形区域剪切效果。这种方法对于创建交互式用户界面、自定义控件或者实现高级的图形...
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 点 */     
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
01-21
裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。 2. 遮罩/蒙板(mask) 蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合...
css写多边形边框(clip-path)
qq_39273423的博客
04-23 2267
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;
【CSS3】clip-path属性深入理解与使用
細水、長流√的专栏
03-01 1254
定义：clip-path: inset(, ,,, ），括号内的值类似于margin、padding值的写法，可以写一个值，也可以写多个值。3.　ellipse；
圆点围绕圆旋转---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
2022-02-11 学习记录：通过CSS3的clip-path实现多边形
weixin_44845483的博客
02-11 600
今天学习了使用CSS实现多边形，感觉很有意思也很使用的一个属性 项目中遇到了需要画梯形，如果使用切图的话，对于不同分辨率下兼容性可能不太好实现，所以还是得靠前端强大的功能来实现！ 使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变 polygon可以定义多边形，需要写入每个顶点的坐标位置(具体数值或者百分比都可以) 下边写一个画出五角星的例子 .try-empty { position: absolute; width: 100%;
使用clip-path来画不同的形状，三角形，多边形，菱形，六边形等等
10-12 373
单词"clip path"的直译过来就是：裁剪路径clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。也就是说，使用 clip-path 可以将一个容器裁剪成任何我们想要的样子。div {
clip-path
时光清浅处，一步一安然
04-24 1706
clip-path clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。 语法： clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit; 属性 描述 clip-source 用 URL 表示剪切元素的路径 basic-shape 将元
clip-path 画爱心
07-27
要使用clip-path属性来画一个爱心，可以使用多边形的方式来实现。下面是一个示例代码： clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 50% 70%, 20% 100%, 0% 35%); 这个多边形的顶点坐标依次为(50% 0%), (100%...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值