学习笔记——CSS不规则图形的实现clip-path

Love The Way You Lie 2023-01-19 03:21 4阅读 0赞

> 前端中，有时需要在三角形，五边形，六边形甚至星形等不规则图形内放入背景图或者内容。

--------------------

**这里，主要使用了CSS中一个clip-path的属性来实现不规则图形。 **

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>不规则图形</title>
        <style>
          * { padding: 0; margin: 0; }
          .box { 
            width: 1200px;
            margin: 100px auto;
            display: flex;
            flex-wrap: wrap;
          }
          .img {
            margin: 0 10px;
            width: 200px;
            height: 200px;
            background-image: url('./electricity.gif');
            background-size: 100% 100%;
          }
          .triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
          .five { clip-path: polygon(50% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); }
          .six { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="triangle img"></div>
          <div class="five img"></div>
          <div class="six img"></div>
        </div>
      </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzM5MTI2_size_16_color_FFFFFF_t_70]: /images/20221021/e89a1c7465f147f39c5b5d93bc3d4512.png

发表评论取消回复

表情：

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

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

相关阅读

相关 UGUI学习笔记（八）UGUI不规则响应区域

一、Unity自带的点击策略在上一篇文章中我们了解到，UI的默认响应区域是UI元素所在的矩形框线内的区域。这也就意味着，当UI的图形为不规则形状时，点击图形的外部也可能

港控/mmm°/ 2023年09月27日 09:08/ 0 赞/ 139 阅读

相关 Qt之按钮形状不规则 ---通过贴图实现

在应用开发中，有时候为了美观会在UI界面中增加不规则的按钮 Qt实现不规则按钮只需要一个函数就能搞定：setMask() 以QToolButton 为例：实现的主要代码

秒速五厘米/ 2023年07月20日 05:41/ 0 赞/ 72 阅读

相关 python饼形图_Python | 饼形图

python饼形图 A pie plot or a pie chart is a circular statistical graphic technique, in whi

我就是我/ 2023年03月05日 07:30/ 0 赞/ 43 阅读

相关学习笔记——CSS不规则图形的实现clip-path

> 前端中，有时需要在三角形，五边形，六边形甚至星形等不规则图形内放入背景图或者内容。 -------------------- 这里，主要使用了CSS中一个clip-pa

Love The Way You Lie/ 2023年01月19日 03:21/ 0 赞/ 5 阅读

相关 Java——二维点计算不规则多边形的周长

给定点数，顺时针输入点位坐标，计算不规则多边形周长！ [点击链接下载源代码][Link 1] ackage information; public

阳光穿透心脏的1/2处/ 2022年12月16日 15:23/ 0 赞/ 190 阅读

相关学习笔记——轮播图的实现

-------------------- > 轮播图是前端开发的一个重要的技术。以下使实现轮播图的三种方法： 1.使用纯CSS实现： > 使用CSS的动画效果实现，能

谁借莪１个温暖的怀抱￠/ 2022年11月21日 11:41/ 0 赞/ 211 阅读

相关 css绘制梯形图形，及显示矩形图片

梯形 ![20190626115936953.png][] div+transform实现如上效果，直接拉到底部。 \-webkit-mask-image加上梯形遮罩

Dear 丶/ 2022年05月15日 13:54/ 0 赞/ 624 阅读

相关 CSS学习笔记

插入样式表的方法：有三种样式表：元素内嵌样式表、文档内嵌样式表以及外部样式表。元素内嵌样式表和文档内嵌样式表： 1 <!DOCTYPE html>

绝地灬酷狼/ 2021年12月10日 07:15/ 0 赞/ 449 阅读

相关 python学习04之柱形图和热图

　　1、加载数据　　　　和折线图一样，我们首先都要将csv文件中的数据加载出来（代码是来自kaggle微教程中的）　　　 Path of the file to

古城微笑少年丶/ 2021年11月29日 15:16/ 0 赞/ 182 阅读

相关 CSS学习笔记

> 学习网址:https://www.w3school.com.cn/ > 持续学习，持续更新 > 如有错误，欢迎指点基础一.简介 1.CSS 指层叠

叁歲伎倆/ 2021年09月07日 06:04/ 0 赞/ 440 阅读