怎么用css实现凸字形状

这篇文章主要介绍了怎么用CSS实现凸字形状，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　代码在这儿：

　　<divclass="box">

　　<spanclass="big"></span>

　　<spanclass="top"></span>

　　<spanclass="topR"></span>

　　</div>

　　body{

　　display:flex;

　　justify-content:center;

　　align-items:center;

　　.box{

　　position:relative;

　　width:400px;

　　height:400px;

　　top:200px;

　　color:lightblue;

　　.big{

　　position:absolute;

　　width:400px;

　　height:200px;

　　border-radius:20px;

　　background-color:currentColor;

　　bottom:0;

　　}

　　.top{

　　position:absolute;

　　width:100px;

　　left:calc((400px-100px)/2);

　　height:150px;

　　border-radius:20px20px00;

　　background-color:currentColor;

　　top:50px;

　　}

　　.top::before{

　　content:"";

　　position:absolute;

　　background-color:lightblue;

　　height:48px;

　　width:100px;

　　left:-100px;

　　top:102px;

　　}

　　.top::before{

　　content:"";

　　position:absolute;

　　background-color:lightblue;

　　height:48px;

　　width:100px;

　　left:-100px;

　　top:102px;

　　}

　　.top::after{

　　content:"";

　　position:absolute;

　　background-color:#fff;

　　border-radius:0020px0;

　　height:48px;

　　width:100px;

　　left:-100px;

　　top:102px;

　　}

　　.topR{

　　position:absolute;

　　background-color:lightblue;

　　height:48px;

　　width:100px;

　　right:50px;

　　top:152px;

　　}

　　.topR::after{

　　content:"";

　　position:absolute;

　　background-color:#fff;

　　border-radius:00020px;

　　height:48px;

　　width:100px;

　　left:0;

　　top:0;

　　}

　　}

　　}

　　一开始我以为只要上下两个圆角矩形拼接就行，NONONO，其实两个圆角相交处还有圆角，一看这个圆角就知道，可以使用白色的圆角矩形覆盖，那么问题来了：

　　白色的圆角矩形覆盖之后，中间会形成空隙，这个空隙需要蓝色填满。所以思路是这样的：

　　一、先建立上下两个圆角矩形：

　　html:

　　<spanclass="big"></span>

　　<spanclass="top"></span>

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用css实现凸字形状”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!