[WIP]巧用 CSS 实现高频出现的复杂怪状按钮（二）

[chokcoco]

接上篇，巧用 CSS 实现高频出现的复杂怪状按钮。

上篇中，我们通过渐变的高阶技巧，实现了如下的内凹圆角边框：

本文，我们将探讨另外一个非常有意思的图形 -- 内凹平滑圆角：

此图形与我们在 使用 CSS 轻松实现高频出现的各类奇形怪状按钮 讨论的类似于 Chrome Tab 造型的按钮相比，是一种反向操作。

类似于 Chrome Tab 按钮造型

常见于这样的设计中：

内凹平滑圆角实现上的难点

相对于上述 outside-circle 图形，内凹平滑圆角实现上的难点在于 -- 内凹部分要求是透明的！

所以下面这种方式就无法奏效：

什么意思呢？思考上面的图形，如果需要红色部分是透明的，想一想，是不是比较难实现呢？

当然，并非所有场景都是需要透明的，大部分时候，例如刚刚出现的过的这张图，被挖空的一角，很多时候白色也是够用的：

巧妙如何通过图形拼接实现内凹平滑圆角

好的，如果不考虑透明这个因素，要拼接出内凹平滑圆角其实并不困难。

下面我通过一个动画，给出内凹平滑圆角的拼接过程：

<div class="inner-curve-1">
    <div class="g-rect"></div>
</div>

@property --ca {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}
@property --cb {
  syntax: '<color>';
  inherits: false;
  initial-value: #ce03f1;
}
@property --cc {
  syntax: '<color>';
  inherits: false;
  initial-value: #ce03f1;
}

.inner-curve-1 {
    width: 300px;
    height: 100px;
    background: radial-gradient(circle at 50% -10px, var(--cc), var(--cc) 40px, #3f51b5 calc(40px + 0.5px), #3f51b5);
    animation: colorChange 6s infinite linear;
    
    .g-rect {
        position: absolute;
        width: 300px;
        height: 20px;
        left: 0;
        top: -15px;
        background: linear-gradient(90deg,var(--ca), var(--ca) 93px, transparent 93px, transparent calc(300px - 93px), var(--ca) calc(300px - 93px), var(--ca));
        z-index: -1;
        animation: colorChange 6s infinite linear;
        
    }
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--cb);
        top: -15px;
        left: 72px;
        animation: colorChange 6s infinite linear;
    }
    
    &::after {
        left: unset;
        right: 72px;
    }
}

@keyframes colorChange {
    0% {
        --ca: #000;
        --cb: #ce03f1;
        --cc: #ce03f1;
    }
    70%,
    100% {
        --ca: #3f51b5;
        --cb: #3f51b5;
        --cc: #fff;
    }
}

我们能得到这么一个有意思的变换效果：

本质上还是不同形状图形的拼接，动画示意下，应该非常好理解：

当然，这里为了让大家更好的理解，利用了几个元素（算上伪元素），并且，实际最后白色的部分并非透明的！

如果我们希望白色部分一整个是透明的，可以如何处理呢？这里就需要运用上 mask，通过在一个元素内部进行裁剪，最终得到一个镂空的内凹平滑圆角：

<div class='inner-curve-2'></div>

.inner-curve-2 {
  --r: 20px;  
  --s: 40px;  
  --a: 20deg; 

  --_m:0/calc(2*var(--r)) var(--r) no-repeat
    radial-gradient(50% 100% at bottom,#000 calc(100% - 1px), transparent);
  --_d:(var(--s) + var(--r))*cos(var(--a));

  width: 300px;
  height: 100px;
  mask:
    calc(50% + var(--_d)) var(--_m),calc(50% - var(--_d)) var(--_m),
    radial-gradient(var(--s) at 50% calc(-1*sin(var(--a))*var(--s)),
      transparent 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(1 - sin(var(--a)))),
    linear-gradient(90deg,#000 calc(50% - var(--_d)), transparent 0 calc(50% + var(--_d)),#000 0);
  mask-repeat: no-repeat;
}

效果如下：

并且，它是真实的支持镂空的。我们将上面两种方式实现的镂空的内凹平滑圆角，放在一个渐变背景下，就能看出差别：

上述两种方式的完整代码，你在这里可以看到：CodePen Demo -- 内凹平滑圆角 - inner curve