• 由小见大!不规则造型按钮解决方案


    今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:

    emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。

    虽然麻烦,但是这个图形勉强也是能用 CSS 实现的。本文就将探讨一下上述图形的纯 CSS 实现方式,并且从中进行一定的扩展延伸。

    尝试实现

    这个图形其实与我们的 Chrome Tab 按钮非常类似,像是这样:

    不一样之处在于,Chrome 的侧边其实是垂直的竖线,而上述的需求,侧边是一条斜线。

    首先,我们快速看看这个 Chrome Tab 的交互应该如何实现:

    我们对这个按钮形状拆解一下,这里其实是 3 块的叠加:

    只需要想清楚如何实现两侧的弧形三角即可。这里还是借助了渐变 -- 径向渐变,其实他是这样,如下图所示,我们只需要把黑色部分替换为透明即可,使用两个伪元素即可:

    代码如下:

    <div class="outside-circle">div>
    
    .outside-circle {
        position: relative;
        background: #e91e63;
        border-radius: 10px 10px 0 0;
    
        &::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            left: -20px;
            bottom: 0;
            background: #000;
            background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
        }
        &::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            right: -20px;
            bottom: 0;
            background: #000;
            background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
        }
    }
    

    即可得到:

    上述的所有图形的完整代码,你可以在这里看到:CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮

    那么,问题来了,我们有没有办法,通过上述图形,得到侧边两条线是斜线的效果呢?

    有了右边的图形,想要得到我们最终的效果不就手到擒来了么?像是这样:

    那么,怎么实现呢?其实也非常好做,这里利用了 CSS 3D 旋转,形成了一种视觉上的景深效果,来实现侧边由竖直到斜边的转化。

    看看代码,其实就两行代码,在上述 outside-circle 的图形基础上:

    1. 设置一个适当的 perspective
    2. 设置一个恰当的旋转圆心 transform-origin
    3. 绕 X 轴进行旋转

    代码非常简单,我们其实只需要这样:

    .outside-circle {
        position: relative;
        background: #e91e63;
        border-radius: 10px 10px 0 0;
        transform: perspective(40px)  rotateX(20deg) ;
        transform-origin: 50% 100%;
    
        &::before { ... }
        &::after{ ... }
    }
    

    核心在于这两句:

    • transform: perspective(40px) rotateX(20deg)
    • transform-origin: 50% 100%

    制作一个动画,会更好理解一点:

    是的,再复述一次,这里利用了 CSS 3D 旋转,形成了一种视觉上的景深效果,来实现侧边由竖直到斜边的转化。

    利用这个技巧实现梯形

    通常,我们可以利用这个技巧,制作梯形,像是这样:

    .trapezoid{
        position: relative;
        width: 160px;
        padding: 60px;
    }
    .trapezoid:before{
        content:"";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        transform:perspective(40px) scaleY(1.3) rotateX(5deg);
        transform-origin: bottom;
        background: deeppink;
    }
    

    效果如下:

    还原题图效果

    好,理解了之后,还原题图效果就很简单了。我们只需要实现一边的效果,再将整个图形左移,利用父容器的 overflow: hidden 裁剪掉左边部分,保留右边即可。

    完整的代码如下:

    <div class="g-container">
        <div class="g-inner">div>
    div>
    
    .g-container {
        position: relative;
        width: 300px;
        height: 100px;
        background: #2cb2e0;
        border: 1px solid #277f9e;
        border-radius: 10px;
        overflow: hidden;
    }
    .g-inner {
        position: absolute;
        width: 150px;
        height: 50px;
        background: #fee6e0;
        bottom: 0;
        border-radius: 0 20px 0 20px;
        transform: perspective(40px) scaleX(1.4) scaleY(1.5) rotateX(20deg) translate(-10px, 0);
        transform-origin: 50% 100%;
        &::before {
            content: "";
            position: absolute;
            right: -10px;
            width: 10px;
            height: 10px;
            background: inherit;
            mask: radial-gradient(circle at 100% 0, transparent, transparent 9.5px, #000 10px, #000);
        }
    }
    

    这样,我们就完美的实现了题目的效果:

    完整的在线示意,戳这里:CodePen Demo -- Unregular Border

    最后

    本文的目的更多的是介绍一种可行的小技巧,实际中实现上述的效果可能有更好的方法,譬如切图?有更好的解法的,欢迎补充指正。

    好了,本文到此结束,希望本文对你有所帮助 😃

    更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

    如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    想 Get 到最有意思的 CSS 资讯,千万不要错过我的 iCSS 公众号 😄 :

    image

    如果觉得文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
    打赏支持
    +

    (^_^)打个赏喝个咖啡(^_^)

    微信支付
    支付宝支付
  • 相关阅读:
    py9_详解 Python 类属性/类方法 以及如何转换类方法和静态方法
    go 序列化与反序列化
    每日一题|2022-11-2|1620. 网络信号最好的坐标|暴力枚举|Golang
    尬住了!小扎被自家产品爆黑料;酷炫清晰的『技术学习路线图』大合辑;Markdown引用块的N种样式;地形设计工具;前沿论文 | ShowMeAI资讯日报
    语言主要是一种交流工具,而不是思维工具?GPT5何去何从?
    适配移动端,菜单采用底部固定形式(1+X Web前端开发初级 例题)
    剑指offer 14. 二进制中1的个数
    NumPy 数组应用初探
    js 把对象转为字符串,并以逗号隔开
    (Pytorch)简单了解torch.autograd.grad()以及torch.autograd.backward()
  • 原文地址:https://www.cnblogs.com/coco1s/p/17128906.html