冒泡文字提示框（clip-path）

前言

一些时候我们需要一些特殊的样式，例如常见的冒泡文字提示框，例如常见网站左下角客服图标，这类样式对于部分人可能很多样式都没用过，接下来我来分享一个案例

案例

首先在html部分

<div class="container">
    <div class="inner">
      <span>i</span>
      <h1>hey</h1>
      <p>请问您需要什么服务</p>
    </div>
  </div>

css主要通过clip-path，小伙伴们可自行去MDN等网站查看这个属性，在这里就不详解了；设置半径10% ，位置在右上角，移入时候半径75%扩大，i字利用rgba隐藏了

 .container {
      background-color: aqua;
      padding: 1em;
      border-radius: 10px;
      width: 250px;
      clip-path: circle(10% at 90% 20%);
      transition: all .5s ease-in-out;
      cursor: pointer;
    }
    .container:hover {
      clip-path: circle(75%);
      background: #00b6ff;
    }
    .inner h1 {
      color: #fff;
      margin: 0;
    }
    .inner p {
      color: #fff;
      font-size: