如下图所示的外边界半径..? [英] Outward border radius like given in below picture..?
本文介绍了如下图所示的外边界半径..?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 ant-d 导航栏,我必须制作一个如图所示的外边框.我怎样才能做到这一点?
解决方案
您可以为每个菜单项指定顶部和底部 div
以配合每个菜单项,然后设置样式以提供您的边界半径.看看我为你做的这个例子:
var header = document.getElementById("cont");var btns = header.getElementsByClassName("containerblue");for (var i = 0; i < btns.length; i++) {btns[i].addEventListener("点击", function() {var current = document.getElementsByClassName("active");current[0].className = current[0].className.replace(" active", "");this.className += "活动";});}
.container{背景颜色:天蓝色;宽度:300px;}.containerblue{背景颜色:蓝色;宽度:20px;左边距:25px;}.containerblue.active >.最佳 {背景颜色:蓝色;宽度:200px;高度:25px;边框半径:0px 0px 25px 0px;指针事件:无;}.containerblue.active >.中间{背景颜色:天蓝色;宽度:200px;边框半径:25px;填充:20px;}.containerblue.active >.底部 {背景颜色:蓝色;宽度:200px;高度:25px;边框半径:0px 25px 0px 0px;指针事件:无;}.最佳{背景颜色:蓝色;宽度:200px;高度:25px;指针事件:无;}.中间{背景颜色:蓝色;宽度:200px;填充顶部:20px;填充底部:20px;光标:指针;白颜色;}.底部{背景颜色:蓝色;宽度:200px;高度:25px;指针事件:无;}
<div class="containerblue active"><div class="btn top"></div><div class="btn middle">搜索</div><div class="btn bottom"></div><div class="containerblue"><div class="btn top"></div><div class="btn middle">合同</div><div class="btn bottom"></div>
<div class="containerblue"><div class="btn top"></div><div class="btn middle">等</div><div class="btn bottom"></div>
I am using ant-d navigation bar and i have to make an outward border like given in image. how can i achieve this?
解决方案
You can give every menu item a top and bottom div
to go along with each menu item and then style it to give you your border radius. Look at this example I made for you:
var header = document.getElementById("cont");
var btns = header.getElementsByClassName("containerblue");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
.container{
background-color: skyblue;
width: 300px;
}
.containerblue{
background-color: blue;
width: 20px;
padding-left: 25px;
}
.containerblue.active > .top {
background-color: blue;
width: 200px;
height: 25px;
border-radius: 0px 0px 25px 0px;
pointer-events: none;
}
.containerblue.active > .middle{
background-color: skyblue;
width: 200px;
border-radius: 25px;
padding: 20px;
}
.containerblue.active > .bottom {
background-color: blue;
width: 200px;
height: 25px;
border-radius: 0px 25px 0px 0px;
pointer-events: none;
}
.top{
background-color: blue;
width: 200px;
height: 25px;
pointer-events: none;
}
.middle{
background-color: blue;
width: 200px;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
color: white;
}
.bottom{
background-color: blue;
width: 200px;
height: 25px;
pointer-events: none;
}
<div class="container" id="cont">
<div class="containerblue active">
<div class="btn top"></div>
<div class="btn middle">Search</div>
<div class="btn bottom"></div>
</div>
<div class="containerblue">
<div class="btn top"></div>
<div class="btn middle">Contracts</div>
<div class="btn bottom"></div>
</div>
<div class="containerblue">
<div class="btn top"></div>
<div class="btn middle">Etc.</div>
<div class="btn bottom"></div>
</div>
</div>
这篇关于如下图所示的外边界半径..?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!