javascript - 如何以凸面/外部方式使用边界收音机?
问题描述
我怎样才能制作像这张照片中的边界收音机? 在此处输入图像描述
这是我到现在为止所做的
直到现在我有这个代码:
.sidebar__pages {
text-decoration: none;
width: 100%;
height: 45%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin-top: 20%;
}
.sidebar__page {
text-decoration: none;
width: 100%;
height: 30%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.sidebar__page-button {
background-color: black;
border-top-left-radius: 38px;
border-bottom-left-radius: 38px;
//Here is the question ... how
}
<ul className="sidebar__pages">
<li className="sidebar__page">
<NavLink to="/" className="sidebar__page-button" activeClassName="">
Administrare
</NavLink>
</li>
有谁知道请帮我找出如何制作这种边界收音机?先感谢您 !:D
解决方案
这是一个为两个角使用两个额外跨度的示例。但是菜单阴影会有问题。
.container {
background-color: #e2e2e2;
padding: 20px 20px 20px 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
width: 200px;
}
li {
border-radius: 0 30px 30px 0;
display: block;
position: relative;
line-height: 30px;
height: 30px;
}
li a {
display: block;
text-decoration: none;
color: grey;
line-height: 30px;
padding-left:20px
}
li.active {
background-color: #e2e2e2;
border-radius: 30px 0 0 30px;
}
li.active span.top {
display: inline-block;
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: -15px;
right: 0;
}
li.active span.top:before {
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
border-radius: 50%;
bottom: 0;
right: 0;
box-shadow: 15px 15px 0 0 #e2e2e2;
}
li.active span.bottom {
display: inline-block;
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: 30px;
right: 0;
}
li.active span.bottom:before {
top: 0;
right: 0;
box-shadow: 15px -15px 0 0 #e2e2e2;
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
border-radius: 50%;
}
<div class="container">
<ul>
<li><a href="">Link 1</a></li>
<li class="active"><a href="">Link 2</a><span class="top"></span><span class="bottom"></span></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
推荐阅读
- javascript - 来自数据的分页如何来自 Angular 中的 json
- revit-api - Revit Python Shell:如何在项目中没有实例的情况下获取“管道类型”系列的类型名称?
- windows - Windows 10 无休止地选择 UI 中的所有内容
- java - 预设字符中的非重复字符
- java - 流减少与 Stream.parallel.reduce()
- ifttt - IFTTT 如何通过 API 以编程方式创建和配置小程序
- python - 如何在 Tkinter 中为这条弧的创建设置动画?
- visual-studio - 如何打开多个VS实例
- ios - UISearchController/UISearchBar 在 macOS 下的行为与 iOS 不同
- flutter - 无法从“Runner”更改颤振应用程序名称