CSS clip-path 运用

偶然间接触到 clip-path 的 CSS 属性，接的挺有意思，想着记录一下。

clip-path 是通过裁剪元素的方式显示裁剪的指定区域。通俗来说就是像剪窗花一样。

根据 MDN 官方的实例，裁剪一共有四个属性，他们分别是 inset | circle | ellipse | polygon | path

inset 向内部剪裁

circle 按照圆形裁剪

ellipse 按照椭圆形剪裁

polygon 按照多边形裁剪

基于以上的一些用法，我们可以想到 Tips 提示的用法，之前使用的拼接的方法，会存在明显的割裂。

<div class="tips">Tips</div>

.tips {
  position: relative;
  --bg: linear-gradient(45deg, #ff3c41, #ff9800);
}

.tips::before,
.tips::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--bg);
  /*完全相同的背景*/
  z-index: -1;
}

参考链接：【CSS 实现支持渐变的提示框（tooltips）】https://segmentfault.com/a/1190000040140312