糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

使用CSS 的 clip-path 属性可以创建各种形状，包括三角形和箭头

使用CSS 的 clip-path 属性可以创建各种形状，包括三角形和箭头

原创 新闻资讯

于 2023-09-22 11:14:58 发布

17200 浏览

技术讨论

css中有个clip-path可以用于剪切路径，就是剪切出我们想要展示在前端显示的内容，这样会让被剪切的元素内容一部分显示一部分隐藏，看下面这个例子：

!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>测试</title>
   <style>
   .test {
     width: 200px;
     height: 200px;
     background: red;
     color: #fff;
     text-align: center;
     line-height: 200px;
   }
   </style>
  </head>
 <body>
   <div class="test">测试</div>
 </body>
</html>


显示效果：

1.jpg


当设置了clip-path后：

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: circle(80px at 50% 50%);
}


显示效果：

2.jpg


即经过clip-path: circle(80px at 50% 50%)剪切后，我们只能看到圆这部分内容了，圆外的内容就被隐藏了。

circle：将元素剪裁成一个圆，用法：clip-path: circle(圆的半径 at 圆心)

即上面例子通过clip-path: circle(80px at 50% 50%)这个设置后，只有圆心位置80px的圆形区域显示，其它部分隐藏了。

clip-path除了使用上面的circle外，还可以使用ellipse椭圆、inset矩形、polygon多边形和path路径：

ellipse：将元素剪裁成一个椭圆，用法：clip-path: ellipse(圆的水平半径 圆的垂直半径 at 圆心)

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: ellipse(80px 40px at 50% 50%)
}

显示效果：

3.jpg

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
 border:5px solid blue;
 clip-path: ellipse(80px 40px at 10% 50%);
}

显示效果：

4.jpg


inset:  将元素剪裁为一个矩形, inset中参数设置跟margin和padding很像，都是距离元素上右下左的距离：

clip-path: inset(距元素上边距距离 距元素右边距距离 距元素下边距距离 距元素左边距距离 round 圆角大小）

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: inset(90px 100px 30px 20px);
}

显示效果：

5.jpg

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: inset(90px 100px 30px 20px round 6px);
}


显示效果：

6.jpg


polygon: 将元素剪裁成一个多边形, 定义最少3个点，多点连线

用法：clip-path: polygon(x1 y1，x2 y2，x3 y3)

polygon中的点跟canvas中点坐标差不多，都是以左上角为基准的：

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: polygon(100px 5px, 5px  150px, 200px 180px);
}

显示效果：

7.jpg

上述clip-path: polygon(100px 5px, 5px  150px, 200px 180px)还可以转成clip-path: path形式，path中可以设置SVG路径字符串：

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: path("M100,5 L5,150 L200,180");
}

显示效果：

8.jpg

上面例子中使用clip-path实现了三角形绘制，现在实现一下箭头绘制：

.test {
  width: 200px;
  height: 200px;
  background: red;
  color: #fff;
  text-align: center;
  line-height: 200px;
  clip-path: polygon(100px 0, 180px  50px, 150px 50px, 180px 180px, 50px 180px, 50px 50px, 50px 0);
}

显示效果:

9.jpg

本次简单介绍了css中的clip-path，当然使用clip-path还可以绘制出很多其它图形，大家可以在平时工作学习中总结一下。

css

网站开发

小程序开发

上一篇：抖音与美团的竞争已经进入白热化阶段。 下一篇：你升级 Vue3了吗？

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式，其通过简单易懂的界面设计，让用户在游戏中体验到乐趣，同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情

  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料，包含：房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书（由于我们公司其中一区域已有注册另外一公司，所以必须需要承诺书）

    查看详情

  • 3. 微信支付商户申请接入流程

    微信支付，是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案，包括多种支付方式，如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情

  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》，国家对非经营性互联网信息服务实行备案制度，对经营性互联网信息服务实行许可制度。

    查看详情

  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似，同时微信小程序支持通过已认证的微信公众号进行注册申请，无需进行单独认证即可使用，同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情