剪切矩形

Question

我需要一个像边框一样使用的手镯，但想要切掉一部分并将轴与按钮的中心对齐。如下图所示。

Answer 1

可以通过将一个div放在另一个div上来轻松完成。我添加了下面的代码段。

#rect{
  width:90%;
  height:150px;
  border:6px solid #0086c7;
  position:relative;
  z-index:990;
  }
#box{
  position: absolute;
    background: #fff;
    z-index: 999;
    bottom: -24px;
    width: 60%;
    height: 51px;
    right: 21%;
  display:flex;
  justify-content:center;
  align-items:center;
  }
button{
    
    border: none;
    color: white;
    padding:3px 10px;
    border-radius:100px;
}
.one{
  background:#ff9933;
  margin-right: 10px;
  }
.two{
  background:#12ff66;
  margin-left: 10px;
  }

<div id="rect">
  <div id="box">
  <button class="one">Experiment</button>
  <button class="two">Saiba Mais </button>
  </div>
  </div>

Answer 2

我的建议是将按钮放在矩形上，这似乎是一个更好的解决方案。

以下是有关如何操作的代码：

<div id="rectangle"></div>
<div id="buttoncontainer1">
<div id="button1"> Experimente </div>
</div>  
<div id="buttoncontainer2">
<div id="button2">Saiba Mais
</div>
</div>

<style>   
#rectangle {
 width: 500px;
 height: 300px;
 border: 5px solid blue;
}

#buttoncontainer1 {
 z-index: 10;
 position: absolute;
 background-color: white;
 width: 150px;
 height: 30px;
 top: 300px;
 left: 75px;
} 

#buttoncontainer2 {
 z-index: 10;
 position: absolute;
 background-color: white;
 width: 150px;
 height: 30px;
 top: 300px;
 left: 300px;
}

#button1 {
 width: 125px;
 height: 22px;
 margin: auto;
 border-radius: 10px;
 background-color: orange;
 text-align: center;
 margin-top: 2px;
 padding-top: 3px;
}

#button2 {
 width: 125px;
 height: 22px;
 margin: auto;
 border-radius: 10px;
 background-color: lime;
 text-align: center;
 margin-top: 2px;
 padding-top: 3px;
}

</style>

使按钮容器的背景颜色与矩形/页面的背景颜色相匹配。这是一个小例子：https://jsfiddle.net/6j79d36e/

Answer 3

.main{
  position:relative;
  height:auto;
  width:auto;
}
.bordered{
  position:absolute;
  top:0px;
  left:0px;
  width:200px;
  height:200px;
  border:5px solid #00496d;
  z-index:1;
}
.buttons{
  position:absolute;
  width:150px;
  background:#fff;
  z-index:100;
  top:190px;
  left:25px;
  height:25px;
  }
.buttons button{
display:inline-block;
}

<div class="main">
<div class="bordered"></div>
  <div class="buttons"><button>Experiment</button>
  <button>Saiba</button>
  </div></div>

尝试一次

Answer 4

body{
  background:white;
}
.ractangle{
  width:500px;
  height:200px;
  border : thick blue solid;
  position:relative;
}

.center_btn{
  background:white;
  width:auto;
  padding: 10px 0px;
  position:absolute;
  bottom:-25px;
  margin:0 auto;
  left:25%;
  text-align:center;
}

.btns{
 padding:3px 10px;
 border-radius:100px;
 border:none;
 background:yellow;
 color:white;
 margin : 0 10px;
}

.green_bg{
  background:green;
}

<div class="ractangle">
  <div class="center_btn">
    <button type="button" class="btns">
    Experimet
    </button>
      <button type="button" class="btns green_bg">
    Saiba Maris
    </button>
  </div>
</div>

这是JSFiddle

希望这有帮助。

Answer 5

body{
  background:white;
}
.ractangle{
  width:500px;
  height:200px;
  border : thick blue solid;
  position:relative;
}

.center_btn{
  background:white;
  width:230px;
  padding: 10px 0px;
  position:absolute;
  bottom:-25px;
  margin:0 auto;
  left:0;
  text-align:center;
  right:0
}

.btns{
 padding:3px 10px;
 border-radius:100px;
 border:none;
 background:yellow;
 color:white;
 margin : 0 10px;
}

.green_bg{
  background:green;
}

------------------------------------------------------


<div class="ractangle">
  <div class="center_btn">
    <button type="button" class="btns">
    Experimet
    </button>
      <button type="button" class="btns green_bg">
    Saiba Maris
    </button>
  </div>
</div>