CSS clip-path 运用

ゝ一纸荒年。 2022-10-07 13:50 162阅读 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 条评论，162人围观）

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

相关阅读

相关 CSS三角强化的巧妙运用（HTML、CSS）

CSS三角强化的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

╰半橙微兮°/ 2023年10月03日 13:16/ 0 赞/ 4 阅读

相关 Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper

文章目录裁剪布局 ClipRect ClipRRect

柔光的暖阳◎/ 2023年07月17日 14:22/ 0 赞/ 2 阅读

相关灵活运用CSS开发技巧（转载）

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。每写好一篇文章，都会使用大量

分手后的思念是犯贱/ 2023年07月08日 02:55/ 0 赞/ 6 阅读

相关灵活运用CSS开发技巧

「链接和长图失效，请大家点击阅读原文查看详情」前言何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如

柔光的暖阳◎/ 2023年07月07日 08:27/ 0 赞/ 4 阅读

相关 CSS clip-path 运用

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

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

相关 css三角形运用

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

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

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

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

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

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

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

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

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

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

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

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

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

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