个性化镂空h5底部导航栏bar

效果

实现方式

使用radial-gradient径向渐变实现。
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <div class="bottom">
            <div class="btn"></div>
            <div class="tip"></div>
        </div>
    </div>

</body>


<style>
.wrap {
    height: 500px;
    width: 300px;
    background-image: radial-gradient(circle at 50% 54%, red, green, blue);
    position: relative;
}
.bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 50px;

}
.bottom::after {
    width: 43.9%;
    content: '';
    position: absolute;
    height: 50px;
    left: 0;
    background-color: blanchedalmond;
    border-radius: 0 33px 0 0;
    z-index: 1;
}
.bottom::before {
    width: 43.9%;
    content: '';
    position: absolute;
    right: 0;
    height: 50px;
    background-color: blanchedalmond;
    border-radius: 33px 0 0 0;
    z-index: 1;
}
.tip {
    width: 100%;
    position: absolute;
    height: 42px;
    bottom: -3.4px;
    background-image: radial-gradient(circle at 50% -30%, transparent 0%, transparent 18%,  blanchedalmond 14%, blanchedalmond);
    z-index: 0;
}
.btn {
    height: 40px;
    width: 40px;
    position: absolute;
    background-color: blanchedalmond;
    left: calc(50% - 20px);
    border-radius: 100%;
    top: -20px;
    z-index: 1;
}
</style>
</html>