js+css实现可调参数的外围圆形边角选项卡菜单效果代码-html代码-BFW代码库

js+css实现可调参数的外围圆形边角选项卡菜单效果代码

代码语言：html

所属分类：选项卡

代码描述：js+css实现可调参数的外围圆形边角选项卡菜单效果代码，可调节边角radius和背景及按钮颜色。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
<style>

#app {
    --radius: 16px;
    --height: max(48px, calc( var(--radius) * 2 ));
}

.tab {
    
    height: var(--height);
    border-radius: var(--radius) var(--radius) 0 0;
        
    /*
        these --height and --radius variables are not explicitly needed
        for the effect, they could be hard-set into the css if you know you always
        want your rounded corners to be the same size. I've used variables here so 
        you can edit them and see the dynamic change of the corners easily!
    */
    
    position: relative; /* relative so we can position the corners */
}

.tab::after,
.tab::before {
    
    /* 
        here's the magic.
        - I set a background color of inherit to the :before and :after
            = so it perfectly matches the parent it's set on
        - I set a radial mask to cover the :before and :after perfectly
            = with a little 0.25px buffer for sub-pixel anti-aliasing
        - I make the mask 200% to cover the other edges of the :before and :after
        - Then I position the mask in the bottom corner 
    */
    
    aspect-ratio: 1;
    width: var(--radius, 20px); 
    /* the width of the :before/:after is the outer corner size */
    background: inherit;
    -webkit-mask-image: radial-gradient(100% 100% at center, transparent calc(50% - 0.25px), black calc(50% + 0.25px));
            mask-image: radial-gradient(100% 100% at center, transparent calc(50% - 0.25px), black calc(50% + 0.25px));
    /* the mask is flexible and scales with the width, no need to edit it */
    -webkit-mask-size: 200% 200%;
            mask-size: 200% 200%;
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    pointer-events: none;
        
    /*
        this is just normal positioning of the :before and :after to
        get them set at the bottom left of the parent container
    */
    content: "";
    position: absolute;
    bottom: 0;
    left: calc( var(--radius, 20px) * -1);
}
.tab::after {
    /*
        and for the other side, I simply flip the whole box horizontally
        and position it at the end of the parent container
    */
    scale: -1 1;
    left: auto;
    right: calc( var(--radius, 20px) * -1);
}

/*
    just some extra styling for the top-tabs to show
    the outside corners can be easily set on top (or sides)
*/
.top .tab {
    border-radius: 0 0 var(--radius) var(--radius);
}
.top .tab::before,
.top .tab::after {
    bottom: auto;
    top: 0;
    scale: 1 -1;
}
.top .tab::after {
    bottom: auto;
    top: 0;
    scale: -1 -1;
}


/* 






not important for the effect, just for demo purpose 






*/

:root {
    --h: 240;
    --s: 18%;
    --light: hsl(var(--h), var(--s), 95%);
    --dark: hsl(var(--h), var(--s), 15%);
    --fg: var(--light);
    --bg: var(--dark);
    --grad: url("data:image/svg+xml,%3Csvg viewBox='0 0 0 0' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type.........完整代码请登录后点击上方下载按钮下载查看