html导航凹凸效果,纯CSS实现底部弧度效果（凹凸圆弧）

相信大家再开中中都遇到过底部边为圆弧(凹凸圆弧)，其它三边都正常的情况，这种图之前我都会采用图片去搞，但是身为一名开发人员(算是程序员了)，应该从便曾的角度去解决问题，所以今天分享下纯css实现底部弧度效果。

效果图1：底部凸圆弧

这里是内容

.box { width: 250px; margin: auto; overflow: hidden; }

.home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; }

.home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2CBAF9, #04A9F4); }

效果图2：底部凹圆弧

.focus{ position: relative;}

.focus:after{ position:absolute; left:0; right:0; bottom:-11px; content:""; z-index:1; height:20px; width:100%; border-radius:50%; background:#fff;}

原文：https://www.cnblogs.com/weilianguang/p/10953211.html