CSS clip-path 运用

ゝ一纸荒年。 2022-10-07 13:50 144阅读 0赞

偶然间接触到 clip-path 的 CSS 属性，接的挺有意思，想着记录一下。

clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。

根据 MDN 官方的实例，裁剪一共有四个属性，他们分别是 `inset` | `circle` | `ellipse` | `polygon` | `path`

### inset 向内部剪裁 ###

![inset 向内部不同尺寸弧度的剪裁][inset]

### circle 按照圆形裁剪 ###

![circle 按照圆形不同比例的剪裁][circle]

### ellipse 按照椭圆形剪裁 ###

![ellipse 按照椭圆形不同比例位置的剪裁][ellipse]

### polygon 按照多边形裁剪 ###

![polygon 按照不同多边形裁剪][polygon]

基于以上的一些用法，我们可以想到 Tips 提示的用法，之前使用的拼接的方法，会存在明显的割裂。

<div class="tips">Tips</div>

.tips { 
      position: relative;
      --bg: linear-gradient(45deg, #ff3c41, #ff9800);
    }
    
    .tips::before, .tips::after { 
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: var(--bg);
      /*完全相同的背景*/
      z-index: -1;
    }

![Tips 预览][Tips]

> 参考链接：【CSS 实现支持渐变的提示框（tooltips）】https://segmentfault.com/a/1190000040140312

[inset]: /images/20221005/176cc2c3dec4470b9eabec56006dbb82.png
[circle]: /images/20221005/92c09fca683d4dd782e2718ada048e9d.png
[ellipse]: /images/20221005/79a3e248bdf64e7d96fd2431f417795b.png
[polygon]: /images/20221005/2d43fe9d19f242a688dbc99067df2c08.png
[Tips]: /images/20221005/c090631ad69e4a7097fc11759d6856a4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML中CSS选择器的运用浅谈

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 一、元素[选择器][Link 2] 1、书写格式：标记名\

今天药忘吃喽~/ 2024年03月30日 14:37/ 0 赞/ 51 阅读

相关 CSS clip-path 运用

偶然间接触到 clip-path 的 CSS 属性，接的挺有意思，想着记录一下。 clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。根

ゝ一纸荒年。/ 2022年10月07日 13:50/ 0 赞/ 145 阅读

相关 css三角形运用

一个简单的三角形运用页面原理就是宽高为0，设置边框就是三角形了，然后加点定位到自己想要的地方。 .sjx{ margin: auto;

逃离我推掉我的手/ 2022年04月10日 07:14/ 0 赞/ 185 阅读

相关运用CSS3实现风琴导航效果

运用CSS3实现风琴导航效果开发工具与关键技术：DW和CSS3 作者：黄厚润撰写时间：2019年01月16日下面我们使用CSS3来实现风琴导航

野性酷女/ 2022年03月25日 04:54/ 0 赞/ 214 阅读

相关运用CSS3实现跳动的心效果

学了css3也有一段时间了，也可以做一些自己想做的东西，今天就做一颗跳到的心，首先当然要写写好html的样式如图一所示，在一个大的div里套三个小的div和一个p标签。 !

r囧r小猫/ 2022年03月17日 01:10/ 0 赞/ 310 阅读

相关 UL-LI 标签结合CSS的运用

UL-LI 标签结合CSS的运用在CSS布局中，ul,li的运用是非常常见的。配合DIV与CSS，创建无表格布局。其实Dreamweaver中也有自带的CSS布局的

矫情吗；*/ 2021年09月10日 04:28/ 0 赞/ 499 阅读

相关 flutter 按路径切割组件ClipPath、绘制贝塞尔曲线

按路径切割组件 ClipPath( clipper:继承了CustomClipper<Path>的类且重写了两个方法 , 裁切路径

蔚落/ 2021年07月24日 13:42/ 0 赞/ 644 阅读

相关灵活运用CSS开发技巧（第三章）

灵活运用CSS开发技巧（第三章）灵活运用CSS开发技巧(第一章) 灵活运用CSS开发技巧(目录) Component Skill 迭代计数器要点：累加选项单位的...

朱雀/ 2021年01月29日 09:45/ 0 赞/ 637 阅读

相关灵活运用CSS开发技巧（第二章）

使用letter-spacing排版倒序文本要点：通过letter-spacing设置负值字体间距将文本倒序场景：文言文、诗词

系统管理员/ 2021年01月29日 09:14/ 0 赞/ 587 阅读

相关灵活运用CSS开发技巧(第一章)

很多时候跟着书和系统的视频网站学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习过程中会遇到很多问题，Web学习交流群可以帮到你】**[点击进入][Link...

灰太狼/ 2021年01月29日 09:05/ 0 赞/ 594 阅读