外边界半径如下图所示. [英] Outward border radius like given in below picture..?

问题描述

我正在使用ant-d导航栏，并且必须像图像中所示的那样制作一个向外的边框.我怎样才能做到这一点?

I am using ant-d navigation bar and i have to make an outward border like given in image. how can i achieve this?

推荐答案

您可以为每个菜单项添加一个顶部和底部的 div 以与每个菜单项一起使用，然后对其进行样式设置以使您的菜单边界半径.看看我为您制作的这个示例:

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屋！