移动端底部导航半圆实现

戒不掉的伤怀

于 2025-02-24 11:30:56 发布

阅读量97

点赞数 2

文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/u013141712/article/details/145824261

版权

<div class="bottom-nav">
    <div class="two">11</div>
    <div class="line"></div>
    
</div>
  
<style>
 .line {
    width: 80%;
    height: 22px;
    background-color: #f7fcf7;
    position: absolute;
    bottom: 0px;
    border-top: #e81111 2px solid;
 }
.two {
    width: 50px;
    height: 50px;
    background-color: #f3f1f1;
    position: absolute;
    bottom: 0;
    left: 30%;
    text-align: center;
    border-radius: 50px 50px 0 0; /* 圆角设置为上半部分圆角 */
    border: black 1px solid;
    color: #e81111;

}
</style>

实现原理，一个长方形+圆形给他压上即可