css强大的clip-path属性

在查阅css资料的时候，无意间看到了web.dev 介绍css Functions一节里边介绍到了clip-path，看到官方的一个示例用法，感觉很强大，再加上平时很少使用，就去看了一下相关用法，发现确实很有用。

于是我就在思考这个属性的使用场景，头脑中立马就闪现出tooltip。在日常开发中，经常会有这种需求。大多数实现方式都是矩形(主体内容)+伪元素(实现三角形)，确实也很实用。如果不考虑兼容性，我觉得更好的实现方式是svg与本次要讨论的clip-path，

因为在css世界中，大多数时候元素都是以矩形展示的，关注点更多的是布局。控制元素的形状，似乎svg与clip-path就是天生的行家。

 

如下，使用clip-path实现了tooltip效果，这里只是举个例子，大家可以抛砖引玉，实现更多形状。

 

 

<template>
  <div class="tool-tip"></div>
</template>

<script>
export default {};
</script>

<style lang='less'>
:root {
  --padding: 5px;
  --trangle-width: 10px;
  --trangle-start: 70px;
  --border-width: 3px;
}
.tool-tip {
  position: relative;
  width: 100px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 var(--padding);
  background-clip: content-box;
  background-color: #000;
  clip-path: polygon(
    0 0,
    100% 0%,
    100% calc(100% - var(--padding)),
    calc(var(--trangle-start) + var(--trangle-width))
      calc(100% - var(--padding)),
    calc(var(--trangle-start) + calc(var(--trangle-width) / 2)) 100%,
    var(--trangle-start) calc(100% - var(--padding)),
    0 calc(100% - var(--padding))
  );
  &::before,
  &::after {
    content: "";
    position: absolute;
    bottom: calc(var(--trangle-width) / 2);
    width: var(--padding);
    height: calc(100% - var(--padding));
    background-color: #000;
  }
  &::before {
    left: 0;
    border-radius: var(--border-width) 0 0 var(--border-width);
  }
  &::after {
    border-radius: 0 var(--border-width) var(--border-width) 0;
    right: 0;
  }
}
</style>