html - 菜单上的梯形标签
问题描述
我正在尝试实现这种导航外观,但是我在使用 css 时遇到了问题,使用了这个梯形标签。如何使顶角变圆,如果另一个按钮不活动,则在另一个按钮下有一个按钮?有人可以帮助我吗?谢谢。
* {
margin: 0;
}
.settings {
background: grey;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
display: flex;
padding: 0px 20px;
align-items: center;
}
.settings-form {
width: 70%;
}
.settings-form-heading {
display: flex;
align-items: center;
}
.settings-form-heading > h2 {
margin-right: auto;
}
.settings-nav {
border-bottom: 100px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-radius: 4px;
height: 0;
width: 200px;
}
.content {
background: white;
}
<div class="settings">
<div class="settings-form">
<div class="settings-form-heading">
<h2>Title</h2>
<div class="settings-nav"></div>
<div class="settings-nav"></div>
<div class="settings-nav"></div>
</div>
<div class="content">
test
</div>
</div>
</div>
解决方案
选项之一为梯形标签添加舍入:
使用 :before 与边界半径为 .settings-nav
* {
margin: 0;
}
.settings {
background: grey;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
display: flex;
padding: 0px 20px;
align-items: center;
}
.settings-form {
width: 100%;
}
.settings-form-heading {
display: flex;
align-items: center;
}
.settings-form-heading > h2 {
margin-right: auto;
}
.settings-nav {
border-bottom: 70px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 150px;
margin-top:10px;
text-align:center;
position:relative;
}
.settings-nav:before {
content: "";
display:block;
margin-top:-7px;
height:30px;
width:150px;
border-radius:10px;
background-color: red;
}
.settings-nav_in{
margin:auto;
position:absolute;
top:25px;
left:0;
right:0;
}
.settings-nav_1{
z-index:2;
}
.settings-nav_2{
margin-left:-30px;
z-index:1;
opacity:.5;
}
.settings-nav_2:hover{
z-index:3;
opacity:1;
}
.content {
background: white;
}
<div class="settings">
<div class="settings-form">
<div class="settings-form-heading">
<h2>Title</h2>
<div class="settings-nav settings-nav_1"><div class="settings-nav_in">1</div></div>
<div class="settings-nav settings-nav_2"><div class="settings-nav_in">2</div></div>
</div>
<div class="content">
test
</div>
</div>
</div>
切换使用 js 或复选框
推荐阅读
- python - 无法从 python 上传到 Team google drive
- php - tcpdf 自定义字体奇怪的字符
- c# - 如何使用 If 检查 SqlParameter 是否为真
- python - 在不同的子目录中操作数据框
- python - 我无法在 Python Selenium 中选择 iframe 中的元素(我不知道它是否是 iframe,但它就像弹出页面)
- assembly - 当我使用软中断时,程序从保护模式返回到实模式。为什么会这样?
- javascript - 未捕获的类型错误:无法读取未定义的属性“toString”(@qb-multijob)
- java - 请求处理失败;嵌套异常是 org.mybatis.spring.MyBatisSystemException:
- python - Python创建zookeeper本地会话
- django - Django Formset 表单集验证中的必填字段