不二博客

V1

2022/07/06阅读:21主题:山吹

利用 clip-path 绘制不规则的图形

在日常开发过程中UI设计师会存在不规则的形状和设计,在大多数的情况下我们使用了背景图片来渲染不规则的形状,但这与性能优化减少HTTP请求的原则是背道而驰的。

比如说UI设计师希望我们渲染出一个带有渐变颜色的菱形。

也许大家想到可以通过 transform: skew(-10deg) 函数来使图形倾斜,这看起来是一个不错的方案,但是我们想里面添加一些内容。

如下图右侧我们使用 transform: skew(-10deg) 改变你的元素的倾斜角度,但是其内部的元素也继承了父级的 transform 属性发生了倾斜。显然这不是UI设计师想要的效果。

此刻肯定会有机智的小伙伴说,既然子元素继承了父元素的 transform: skew(-10deg) 属性,那么我们设置子元素的 transform: skew(10deg) 属性不就可以了吗?

而此时此刻又出现了一下新的问题,虽然我们已经使子元素水平展示,但是我们元素的中点也发生了倾斜,同样也达不到UI设计师的要求。

而想要实现效果其实很简单,我们只需要 clip-path 来代替掉 transform 即可。

// transform: skew(-10deg);
clip-path: polygon(0100%, 150%, 1000%, 85100%);

clip-path

顾名思义,clip-path 是一个剪裁的路径,路径内的展示,路径外的隐藏。

inset 矩形

circle 圆形

ellipse 椭圆

polygon 多边形

怎么样,现在看到以上的属性,再反思一下之前的项目中,一定会有clip-path可代替或者简化的地方。

在这里推荐一款 clip-path 可视化工具,可以帮助我们快速的构建出想要的图形。

https://bennettfeely.com/clippy/

url 路径

除了以上基础的图形以外,我们还可以设置 svg 作为我们的路径进行剪裁。

<!-- 爱心 svg -->
<svg>
  <clipPath id="love" clipPathUnits="objectBoundingBox">
    <path
      d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"

    />

  </clipPath>
</svg>

<style>
div {
  clip-pathurl(#love);
}
</style>

延伸

以上就是 clip-path 的常用的一些属性了,那么我们到底可以通过 clip-path 实现什么效果呢?

比如我们来绘制绘制一个包含气泡消息的的聊天窗口。

<div class="message">
  <div class="message-pohoto">
    <img src="./logo.png" alt="" />
  </div>
  <div class="message-text">
    没有什么比让自己时刻保持优秀让人感到辛苦的了。从今天起,放弃对优秀的执念吧。与其执着于优秀,不妨让自己拥有不逃避任何事情的勇敢。不惧失败,果断地推进工作,让自己尽快成为那个敢于面对一切的勇者。
  </div>
</div>
<style>
  body,
  html {
    background-color#f9f9f9;
  }

  .message {
    display: flex;
    align-items: flex-start;
    padding20px 10px;
  }

  .message-pohoto {
    padding-right20px;
  }

  .message-pohoto > img {
    width46px;
    height46px;
    border-radius50%;
  }

  .message-text {
    display: inline-block;
    position: relative;
    min-height46px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color#fff;
    font-size14px;
    padding10px 10px 10px 15px;
    --bglinear-gradient(45deg, #ff3c41, #ff9800);
    filterdrop-shadow(0 0 4px rgba(0000.5));
  }

  .message-text::before,
  .message-text::after {
    content"";
    position: absolute;
    width100%;
    height100%;
    left0;
    top0;
    backgroundvar(--bg);
    z-index: -1;
  }

  .message-text::before {
    clip-pathinset(0 0 0 5px round 5px);
  }
  .message-text::after {
    clip-pathpolygon(0% 23px5px calc(23px + 5px), 5px calc(23px - 5px));
  }

总结

clip-path 可以剪裁出各种不规则的形状,使用的好可以简化我们的工作,同时也可以实现很多特殊的效果,是非常值得大家去学习和运用~

最后

感谢你的阅读~

如果觉得这篇文章对你有所帮助,点赞、在看是最大的支持!

分类:

前端

标签:

CSS

作者介绍

不二博客
V1