CSS按钮一边倒圆

我必须创建一个这样的按钮：

我认为这样做很容易,但是我做了圆边(左,右)有些麻烦,我想我也有问题添加一些额外的颜色.

我现在做了类似的东西(我觉得颜色不一样)

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins',sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 2.4px;
  margin-right: -2.4px;
  line-height: 13px;
  background-color: rgba(8,17,23,.5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
}
.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center,#007278 20%,#0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
}

<div class="home_header_buttons">
    <a href="#" class="btn_home">Coaching</a>
    <a href="#" class="btn_home">Order Now</a>
</div>

我尝试用border-top-lef-radius和border-bottom-left-radius做一些事情,但它真的很难看.

以下是我在开发方面的表现：

谢谢你的帮助

解决方法

您正在寻找各种 border-radius属性,这些属性实际上可以单独指定.

具体来说,你正在寻找.home_header_buttons .btn_home：first-child上的border-top-left-radius和border-bottom-left-radius,以及.home_header_buttons .btn_home：last-child上的border-top-right-radius和border-bottom-right-radius.

在我的示例中,每个值都为50px,这可以在以下内容中看到：

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins',.5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center,#0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

<div class="home_header_buttons">
  <a href="#" class="btn_home">Coaching</a>
  <a href="#" class="btn_home">Order Now</a>
</div>

为了增加颜色,遗憾的是你无法为各个角落自己着色(因为这没有任何意义).您需要使用border-left-color和border-right-color.这将为边框的边缘着色：

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins',.5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-left-color: blue;
}

.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center,#0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-right-color: green;
}

<div class="home_header_buttons">
  <a href="#" class="btn_home">Coaching</a>
  <a href="#" class="btn_home">Order Now</a>
</div>

如果你想扩展这些颜色,你需要使用border-top-color和border-bottom-color,但请记住,这将为整个边缘着色：

.home_header_buttons {
  display: flex;
}

.home_header_buttons .btn_home {
  position: relative;
  text-transform: uppercase;
  font-family: 'Poppins',.5);
  border: 1px solid #173c3d;
  padding: 30px 60px;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-left-color: blue;
  border-top-color: blue;
  border-bottom-color: blue;
}

.home_header_buttons .btn_home:first-child::after {
  content: '';
  position: absolute;
  display: block;
  background: radial-gradient(circle at center,#0b111a 100%);
  width: 1px;
  height: 90%;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 1;
}

.home_header_buttons .btn_home:last-child {
  color: #64ffb1;
  border-left: none;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-right-color: green;
  border-top-color: green;
  border-bottom-color: green;
}

<div class="home_header_buttons">
  <a href="#" class="btn_home">Coaching</a>
  <a href="#" class="btn_home">Order Now</a>
</div>