2. 绘制多边形 — clip-path 属性(补充多边形设置圆角border-radius)

狗蛋儿你别跑！！！

已于 2024-03-30 00:22:36 修改

阅读量677

点赞数 3

分类专栏： css 文章标签： tensorflow 人工智能 python

于 2024-03-30 00:21:59 首次发布

本文链接：https://blog.csdn.net/qq_51644044/article/details/137159606

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 了解 clip-path

clip-path 属性是一个用来定义剪切元素可见部分的 CSS 属性。通过 clip-path 属性，你可以创建各种形状的剪切区域，从而实现不同的视觉效果。

2. clip-path 语法

clip-path 的值可以为 <shape> 或 inset(<top> <right> <bottom> <left>) 或 circle(<radius> at <position>) 或 ellipse(<radius-x> <radius-y> at <position>) 或 polygon(<points>)

<shape>：可以是各种形状，如 circle(), ellipse(), polygon() 等。
inset(<top> <right> <bottom> <left>)：创建一个矩形剪切区域，指定上、右、下、左边界的距离。
circle(<radius> at <position>)：创建一个圆形剪切区域，指定圆心位置和半径。
ellipse(<radius-x> <radius-y> at <position>)：创建一个椭圆形剪切区域，指定 x 轴和 y 轴的半径以及中心位置。
polygon(<points>)：创建一个多边形剪切区域，指定多边形各个顶点的坐标。

3. 举例

以 clip-path: polygon(<points>) 为例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .img2 {
        width: 120px;
        height: 120px;
        overflow: hidden;      /* 隐藏溢出部分 */
        clip-path: polygon(    /* 定义直角梯形形状 */
          0 0,                 /* 左上坐标 */
          100% 0,              /* 右上坐标:宽度的100%，高度的0% */
          80% 100%,            /* 右下坐标 */
          0 100%               /* 左下坐标 */ 
        ); 
        border-radius: 10% 10% 30% 10% / 10% 10% 90% 10%; /* 设置圆角大小 */
      }
      .img2 img {
        width: 100%; /* 图片宽度占满容器 */
        height: 100%; /* 图片高度占满容器 */
      }
    </style>
  </head>
  <body>
    
    <div class="img2">
      <img src="./img/000.jpg" alt="" />
    </div>
  </body>
</html>

补充一下：border-radius 的值设为 10% 10% 30% 10% / 10% 10% 90% 10%是为了给多边形设置圆角，因为在CSS中，clip-path: polygon 本身不支持直接设置圆角。clip-path 的多边形是基于直线段的，不支持曲线或圆角。这样设置的意思是border-radius 属性的值被分为两部分，分别对应四个角的水平和垂直半径。具体地，10% 10% 30% 10% 指定了左上、右上、右下和左下四个角的水平半径，而 / 10% 10% 90% 10% 则指定了这四个角的垂直半径。

狗蛋儿你别跑！！！

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
2. 绘制多边形 — clip-path 属性(补充多边形设置圆角border-radius)

clip-path属性是一个用来定义剪切元素可见部分的 CSS 属性。通过clip-path属性，你可以创建各种形状的剪切区域，从而实现不同的视觉效果。
复制链接

扫一扫