本篇文章给大家带来的内容是关于css实现凸字形状的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
昨天看到有人想做凸字型框，今天用几分钟做了一下，发现还蛮巧妙的，分享一下
最终效果如下所示
代码在这儿：
立即学习“前端免费学习笔记（深入）”；
登录后复制
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: 20px 20px 0 0; 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: 0 0 20px 0; 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: 0 0 0 20px; height: 48px; width: 100px; left: 0; top: 0; } }}
登录后复制
一开始我以为只要上下两个圆角矩形拼接就行，NO NO NO，其实两个圆角相交处还有圆角，一看这个圆角就知道，可以使用白色的圆角矩形覆盖，那么问题来了：
白色的圆角矩形覆盖之后，中间会形成空隙，这个空隙需要蓝色填满。所以思路是这样的：
一、先建立上下两个圆角矩形：
HTML:
登录后复制
二：在上面的圆角矩形左右各加一个蓝色色的圆角矩形，与上下两个矩形相切，但是长度和宽度都不能超过上下两个大矩形
三：再在后来添加的小蓝色矩形块儿上，各增加一个大小一致的白色矩形覆盖，分别设置右下圆角与左下圆角，代码如下：
border-radius: 0 0 20px 0;border-radius: 0 0 0 20px;
登录后复制
OK，大功告成！一个凸型框就制作好啦。
相关推荐：
如何使用CSS实现货车loader的效果
如何使用CSS实现货车loader的效果
以上就是css实现凸字形状的代码实例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2893648.html
