CSS中的路径裁剪样式clip-path

最新推荐文章于 2023-08-23 10:04:20 发布

778.

最新推荐文章于 2023-08-23 10:04:20 发布

阅读量268

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44546554/article/details/86665900

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

CSS中的路径裁剪样式clip-path

一．概念：

clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。

1.【clip-path】

值:
| [ || ] | none

: url()

: inset()
| circle() | ellipse() | polygon()

初始值: none

应用于: 所有元素

继承性:
无

注释（以上来自ttps://www.cnblogs.com/xiaohuochai/p/7509225.html）

.div1{   height:80px;width:80px; background:yellow;
clip-path:polygon(50%0,35%40%, 0%50%,30%60%, 10%100%, 50%80%, 90%100%,70%60%,100%50%,  65%40%)
      }

.flag{
 height: 200px; width: 300px; background: red;position:fixed;top:100px;left:618px; border-top-right-radius: 20px; border-bottom-right-radius:20px;
     }



.flag{
height:200px;width:300px;background:red;position:fixed;top:100px;left:618px;border-top-right-radius:20px;border-bottom-right-radius:20px;
      }

.div1-1,.div1-2,.div1-3,.div1-4{
 height: 50px;
 width: 50px;
 background: yellow;
 clip-path:polygon(
 50% 0,
 35% 40%,
 0% 50%,
 30% 60%,
 10% 100%,
 50% 80%,
 90% 100%,
 70% 60%,
 100% 50%,
 65% 40%
 )  
}

.div1-1{
 position: absolute;
 right: 80px;
 top: 10px;
}
.div1-2{
 position: absolute;
 right: 100px;
 top: 64px;
}
.div1-3{
 position: absolute;
 right: 132px;
 top: 117px;
}
.div1-4{
 position: absolute;
 left: 45px;
 top: 139px;
}
.wood{
 height: 300px;
 width: 2px;
 background: black;
 position: fixed;
 left: 617px;
 bottom: 59px;
}

<body>

<div class="flag">

   <div class="div1"></div>

   <div class="div1-1"></div>

   <div class="div1-2"></div>

   <div class="div1-3"></div>

   <div class="div1-4"></div>

</div>

<div class="wood"></div>

</body>

设置定位和clip-path:polygon()的方法来达到效果，以下为截图
在这里插入图片描述

778.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的路径裁剪样式clip-path

CSS中的路径裁剪样式clip-path一．概念：clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。1.【clip-path】值: | [ || ] | none: url(): inset()| circle() | ellipse() | polygon(): fill-box| stroke-box | view-box | ma...
复制链接

扫一扫