2023-03-30 工作记录--CSS-通过clip-path: polygon()实现任意图形+实现多边形进度条

原创已于 2023-04-04 19:05:22 修改

· 2.9k 阅读

18 ·

版权

文章标签：

#css #前端 #css3

于 2023-03-30 17:46:45 首次发布

工作专栏收录该内容

119 篇文章

订阅专栏

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。💪🏻

一、`CSS`-通过`clip-path: polygon()`实现任意图形 ⭐️

(一)、介绍

在这里插入图片描述

clip-path: polygon()拆分翻译：clip（剪）、path（路线）、polygon（多边形）；

简而言之~ 👇🏻

clip-path: polygon()就是：两点成线，剪刀按照连线顺序，裁剪出对应多边形。好比儿时的美工：卡纸剪裁☺️。

(二)、使用

在这里插入图片描述

下面表达式里的x1 y1是点的坐标系，x2 y2同理；
点的顺序需注意，是依照连成多边形的顺序，切记不可打乱；

clip-path: polygon(x1 y1, x2 y2,...);

(三)、举例

在这里插入图片描述

1、实现效果

在这里插入图片描述

2、解析【重要】

clip-path: polygon(0 46px, 0 100%, 100% 100%, 100% 0, 80px 0);

在这里插入图片描述

3、实现代码

.clipTrapezoid {
  width: 599px;
  height: 56px;
  margin: 300px auto;
  position: relative;
  /** 实现多边形 */
  .trapezoid {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: pink;
    /** 圆形边框：左上 右上 右下 左下 */
    border-radius: 0 4px 4px 4px; 
    /** clip-path: polygon(): 按顺序多点连成线,可实现任意由点连成线的图形 */
    clip-path: polygon(0 46px, 0 100%, 100% 100%, 100% 0, 80px 0);     
  }
}

二、`CSS`-实现多边形进度条 ⭐️

注意：是在上方👆🏻 一、CSS-通过clip-path: polygon()实现任意图的基础上实现的哦~

(一)、实现效果

在这里插入图片描述

0%

在这里插入图片描述

25%

在这里插入图片描述

50%

在这里插入图片描述

100%

在这里插入图片描述

(二)、实现代码

在这里插入图片描述

HTML

<div className="clipTrapezoid">
    {/* 多边形 */}
    <div className="trapezoid">
        {/* 进度条 */}
    	<div className="process"></div>
    </div>
</div>

CSS

.clipTrapezoid {
  width: 599px;
  height: 56px;
  margin: 300px auto;
  position: relative;
  /** 实现多边形 */
  .trapezoid {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: pink;
    /** 超出部分隐藏 */
    overflow: hidden;
    /** 圆形边框：左上 右上 右下 左下 */
    border-radius: 0 4px 4px 4px; 
    /** clip-path: polygon(): 按顺序多点连成线,可实现任意由点连成线的图形 */
    clip-path: polygon(0 46px, 0 100%, 100% 100%, 100% 0, 80px 0);
    /** 实现进度条 */
    .process {
      position: absolute;
      height: 58px;
      /** TODO: 当前进度的宽度，动态设置即可 */
      width: 50%;
      background-color: skyblue;
      /** 圆形边框：左上 右上 右下 左下 */
      border-radius: 0 4px 4px 4px; 
    }      
  }
}