不规则造型建筑（由小见大！不规则造型按钮解决方案）

今天    
    
    
    
  ，有个群友在群里提问 


     


     


     


     
，使用 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 的图形基础上：

设置一个适当的 perspective 值 设置一个恰当的旋转圆心 transform-origin 绕 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 订阅收藏    




    




    




    




   。

如果还有什么疑问或者建议  

     

     

     

     ，可以多多交流


  




  




  




  




，原创文章  


  


  


  


，文笔有限   
     
     
     
     ，才疏学浅



   




   




   




   



，文中若有不正之处 



 



 



 



，万望告知






















。