如何将导航栏中当前选项卡上方和下方的选项卡四舍五入，同时遮蔽除当前选项卡之外的导航栏

Question

我以前从未问过 css 问题，所以提前致歉。

这是我的导航栏目前的样子

full sized image here

我真正想实现的两件事：

当前选项卡上方和下方的选项卡循环
（在这张图片中，它将是建议和关于我们）
遮蔽除当前选项卡之外右侧的导航栏

（我正在使用 jinja2 顺便说一句。由于当前选项卡未固定，因此无法对角落进行硬编码）

我不知道 1. 但我尝试了 2. 这是不满意的结果:

想去掉突兀的角

这是我当前的样式表

:root {
    /* colour palette */
    --cream : hsl(40, 100%, 96%);
    --cream-light:hsl(40, 100%, 98%);
    --coffee: hsl(40,  14%, 62%);
    --purple: hsl(258, 14%, 62%);
    --dark  : hsl(109,  7%, 33%);
    --green : hsl(128, 30%, 42%);
    --green2: hsl(140, 15%, 55%);
    --green2-dark: hsl(140, 11%, 36%);

    /*  */
    --shadow-in: inset 1px .15rem .3rem -.1rem rgba(50, 50, 93, 0.25), inset 1px .1rem .2rem -.1rem rgba(0, 0, 0, 0.3), inset -1px -1px .3rem -.1rem rgba(50, 50, 93, 0.25), inset -1px -1px .2rem -.1rem rgba(0, 0, 0, 0.3);
    --shadow-nav: .3rem 0 .6rem -.2rem rgba(50, 50, 93, 0.25), .2rem 0 .4rem -.2rem rgba(0, 0, 0, 0.3);
    --shadow-current: inset .3rem .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset .2rem .2rem .4rem -.2rem rgba(0, 0, 0, 0.3);
    --shadow-hover: inset 1px .3rem .6rem -.2rem rgba(50, 50, 93, 0.25), inset 1px .2rem .4rem -.2rem rgba(0, 0, 0, 0.3), inset -1px -1px .6rem -.2rem rgba(50, 50, 93, 0.25), inset -1px -1px .4rem -.2rem rgba(0, 0, 0, 0.3);

    /* themes */
    --nav-bg   : var(--green2-dark);
    --nav-text : white;
    --nav-hover: hsl(140, 11%, 27%);
    --main     : var(--cream );
    --text     : var(--dark  );
    --highlight: var(--green);
    --card     : var(--cream-light);
}
html, body {
    margin: 0;
    font-size: 1.5vw;
    background: var(--nav-bg);
    transition: all .5s ease;
}
a {
    color: var(--text);
    text-decoration: none;
}
a:hover {
    color: var(--green);
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 18%;
    height: 100vh;
    /*box-shadow: var(--shadow-nav);*/
    /*box-shadow: .3rem 0 .6rem rgba(50, 93, 50, 0.25), .2rem 0 .4rem rgba(0, 0, 0, 0.3);*/
    background: var(--nav-bg);
}
nav h2 {
    margin: 0;
    padding: 10%;
    padding-right: 0 !important;
    height: 1.8rem;

    background: var(--nav-bg);
    color: var(--nav-text);
    transition: margin .5s, padding .5s, border .5s, background .5s, color .3s;
}
/*nav div.current {
    width: 100%;
    padding-right: .9rem;
    background: linear-gradient(90deg, hsl(140, 11%, 36%) 50%, hsl(40, 100%, 96%) 50%);
}
nav div.current:hover {
    padding-right: 0;
}*/
nav h2.current {
    margin-left: 5%;
    padding-left: 5%;
    border-radius: .5rem 0 0 .5rem;
    box-shadow: var(--shadow-current);
    background: var(--main);
    color: var(--text);
}
nav h2:hover {
    margin: 0;
    padding: 10%;
    padding-left: 15%;
    border-radius: 0;
    box-shadow: var(--shadow-hover);
    background: var(--nav-hover);
    color: var(--nav-text);
}
main {
    padding-left: 22.5%;
    padding-right: 7.5%;
    min-height: 100vh;

    background: var(--main);
    color: var(--text);

    display: flex;
    flex-direction: column;
}
main h1 {
    color: var(--green2);
}
footer {
    margin-top: auto;
    margin-bottom: .35rem;
    padding: .25rem;
    padding-right: 2.5rem;
    border-radius: .25rem;

    font: .5rem sans-serif;
    text-align: right;

    background: hsl(40, 39%, 90%);
    box-shadow: var(--shadow-in);
}

这是layout.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Library</title>
    <meta charset='UTF-8'>
</head>
<body>
    <nav>
        {% include 'navigation.html' %}
    </nav>
    <main>
        {% block main %} {% endblock %}
        <footer>Copyright 2021 mightbesimon | github.com/mightbesimon</footer>
    </main>
</body>
</html>

这是navigation.html

{% for url, name in (('/'           , 'Home'         ),
                     ('/register'   , 'Register'     ),
                     ('/login'      , 'Login'        ),
                     ('/suggestions', 'Suggestions'  ),
                     ('/catalogue'  , 'Our Catalogue'),
                     ('/aboutus'    , 'About Us'     ),
                     ('/contact'    , 'Contact'      ),
) %}
    <a href="{{ url }}">
        <!-- <div {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}> -->
            <h2 {% if url_for(request.endpoint, **request.view_args)==url %} class="current" {% endif %}>
                {{ name }}
            </h2>
        <!-- </div> -->
    </a>
{% endfor %}

Answer 1

你可以试试

drop-shadow()（但不幸的是，它会在任何半透明边缘 => 文本）通过 filter 绘制阴影。
box-shadow 从 .current 绘制导航 background
overflow:hidden 在 nav 上避免阴影在 main
position: relative h2 保持在阴影之上 & static .current

这是可能更新的想法

:root {
  /* colour palette */
  --cream: hsl(40, 100%, 96%);
  --cream-light: hsl(40, 100%, 98%);
  --coffee: hsl(40, 14%, 62%);
  --purple: hsl(258, 14%, 62%);
  --dark: hsl(109, 7%, 33%);
  --green: hsl(128, 30%, 42%);
  --green2: hsl(140, 15%, 55%);
  --green2-dark: hsl(140, 11%, 36%);

  /*  */
  --shadow-in: inset 1px 0.15rem 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
    inset 1px 0.1rem 0.2rem -0.1rem rgba(0, 0, 0, 0.3),
    inset -1px -1px 0.3rem -0.1rem rgba(50, 50, 93, 0.25),
    inset -1px -1px 0.2rem -0.1rem rgba(0, 0, 0, 0.3);
  --shadow-nav: 0.3rem 0 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    0.2rem 0 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-current: inset 0.3rem 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset 0.2rem 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3);
  --shadow-hover: inset 1px 0.3rem 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset 1px 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.3),
    inset -1px -1px 0.6rem -0.2rem rgba(50, 50, 93, 0.25),
    inset -1px -1px 0.4rem -0.2rem rgba(0, 0, 0, 0.3);

  /* themes */
  --nav-bg: var(--green2-dark);
  --nav-text: white;
  --nav-hover: hsl(140, 11%, 27%);
  --main: var(--cream);
  --text: var(--dark);
  --highlight: var(--green);
  --card: var(--cream-light);
}
html,
body {
  margin: 0;
  font-size: 1.5vw;
  background: var(--nav-bg);
  transition: all 0.5s ease;
}
a {
  color: var(--text);
  text-decoration: none;
}
a:hover {
  color: var(--green);
}
nav {
  position: fixed;
  top: -1rem;
  bottom: -1rem;
  left: 0;
  width: 18%;
  padding: 1rem 0;
  min-height:100vh;
  overflow: hidden;
  filter: drop-shadow(0.3rem 0.3rem 0.6rem);
  
}
nav h2 {
  margin: 0;
  padding: 10%;
  padding-right: 0 !important;
  height: 1.8rem;
  transition: margin 0.5s, padding 0.5s, border 0.5s, background 0.5s,
    color 0.3s;
  position: relative;
  color: var(--nav-text);
}

nav h2.current:hover {
  box-shadow: var(--shadow-hover), 0 0 0 100vw var(--nav-bg);
}
nav h2.current {
  margin-left: 5%;
  padding-left: 5%;
  border-radius: 0.5rem 0 0 0.5rem;
  box-shadow: 0 0 0 100vmax var(--nav-bg);
  color: var(--text);
  position: static;
}
nav h2:hover {
  margin: 0;
  padding: 10%;
  padding-left: 15%;
  border-radius: 0;
  box-shadow: var(--shadow-hover);
  background: var(--nav-hover);
  color: var(--nav-text);
}
main {
  padding-left: 22.5%;
  padding-right: 7.5%;
  min-height: 100vh;
  background: var(--main);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
main h1 {
  color: var(--green2);
}
footer {
  margin-top: auto;
  margin-bottom: 0.35rem;
  padding: 0.25rem;
  padding-right: 2.5rem;
  border-radius: 0.25rem;
  font: 0.5rem sans-serif;
  text-align: right;
  background: hsl(40, 39%, 90%);
  box-shadow: var(--shadow-in);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

如何将导航栏中当前选项卡上方和下方的选项卡四舍五入，同时遮蔽除当前选项卡之外的导航栏

how to round off the tabs above and below the current tab in the nav bar, also shadow the nav bar except the current tab

css

jinja2

nav

border-radius