以小见大！不规则形状按钮解决方法
时间：2023-04-05 16:19:56
HTML5
今天有群友在群里问下面的图形是否可以用CSS实现：emmm，中间那个类似三次贝塞尔曲线的形状用CSS不好实现。我的建议是切图，但是群友要求必须用CSS实现。虽然麻烦，但这个图形用CSS勉强可以实现。本文将讨论上述图形的纯CSS实现，并对其进行一些扩展。尝试实现这个图形其实和我们Chrome的Tab按钮很像，像这样：不同的是Chrome的边实际上是垂直竖线，而上面的要求，边是对角线。首先我们先简单了解一下这个ChromeTab的交互应该怎么实现：我们把这个按钮的形状拆解一下，这里其实是3块的叠加：想清楚两边的圆弧三角形怎么实现就可以了。这里我们还是使用了渐变——径向渐变，其实就是这样的，如下图，我们只需要将黑色部分换成透明即可，使用两个伪元素：代码如下：
.outside-circle{位置：相对；背景：#e91e63；边框半径：10px10px00；&::之前{内容：“”；位置：绝对；宽度：20px；高度：20px；左：-20px；底部：0；背景：#000；背景：径向渐变（圆圈在00，透明20px，#e91e6321px）；}&::after{内容：“”；位置：绝对；宽度：20px；高度：20px；右：-20px；底部：0；背景：#000；背景：径向渐变（圆形100%0，透明20px，#e91e6321px）；}}得到：上面所有图形的完整代码可以在这里看到：CodePenDemo--CSSVariousButtonShapes|斜杠的效果怎么样？有了右边的图形，是不是很容易得出我们的最终效果呢？像这样：那么，如何实现呢？其实做起来也很容易。这里使用CSS3D旋转形成视觉景深效果实现并排垂直到斜边的变换看代码，其实只有两行代码，基于上面的外圆图形：设置合适的透视值，设置合适的旋转中心transform-origin绕X旋转axis代码很简单，我们其实只需要这样：.outside-circle{position:relative;背景：#e91e63；边框半径：10px10px00；变换：透视（40px）旋转X（20deg）；变换原点：50%100%；&::before{...}&::after{...}}核心就在于这两句：transform:perspective(40px)rotateX(20deg)transform-origin:50%100%做一个动画，它会好一点明白一点：对，再重复一遍。这里使用CSS3D旋转，形成视觉景深效果，实现侧面从垂直到斜边的变换。使用这种技巧来实现梯形通常，我们可以使用这种技巧来制作梯形，像这样：.trapezoid{position:relative;宽度：160px；padding:60px;}.trapezoid:before{content:"";位置：绝对；顶部：0；右：0；底部：0；左：0；变换：透视（40px）scaleY（1.3）rotateX（5deg）；变换原点：底部；了解之后，还原题图效果就很简单了。我们只需要实现一侧的效果，然后将整个图形向左移动，利用父容器的overflow:hidden将左侧部分剪掉，保留右侧。完整代码如下：
