【发布时间】：2021-11-05 15:21:33
【问题描述】：
我之前从未问过 css 问题，所以提前道歉。
这是我的导航栏目前的样子
full sized image here
我真正想要实现的两件事：
- 当前选项卡正上方和下方的圆形选项卡
（在这张图片中是建议和关于我们） - 在除当前选项卡之外的右侧隐藏导航栏
（顺便说一句，我正在使用 jinja2。由于当前选项卡不固定，因此无法对角进行硬编码）
这是我当前的样式表
: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 %}
【问题讨论】：
标签： css jinja2 nav border-radius