CSS 按钮在一侧变圆

Question

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

我认为这样做很容易，但我在做圆边(左、右)时遇到了一些麻烦，而且我想我也很难添加额外的颜色。

我暂时做了这样的东西(感觉颜色不太一样)

.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 做一些事情，但它真的很难看。

这是它在我的开发方面的样子:

谢谢你的帮助

Answer 1

您正在寻找各种 border-radius 属性，实际上可以单独指定。

具体来说，您正在寻找 border-top-left-radius 和 border-bottom-left-radius 在 .home_header_buttons .btn_home:first-child 和 border-top-right-radius 上 和 border-bottom-right-radius 在 .home_header_buttons .btn_home:last-child 上。

在我的示例中，我为每个值设置了 50px，这可以在下面看到:

.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;
  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, #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;
  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>

---

要添加颜色，遗憾的是您不能为各个 Angular 本身着色(因为这没有任何意义)。您需要使用 border-left-color 和 border-right-color。这将为边框的边缘着色:

.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;
  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, #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;
  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', 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;
  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, #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;
  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>