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>

为了增加颜色,遗憾的是你无法为各个角落自己着色(因为这没有任何意义).你需要利用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>

Answer 2

除了边界半径外，您还可以考虑使用伪元素来创建颜色

.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: 2px solid #173c3d;
  padding: 30px 60px;
  box-sizing:border-box;
}

.home_header_buttons .btn_home:first-child {
  color: #16dcf3;
  border-right: none;
  border-radius:50px 0 0 50px;
}
.home_header_buttons .btn_home:first-child::before {
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:-2px;
  width:70px;
  border: 3px solid red;
  border-radius:inherit;
  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;  
  border-radius:0 50px 50px 0;
}
.home_header_buttons .btn_home:last-child::before {
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  right:-2px;
  width:70px;
  border: 3px solid blue;
  border-radius:inherit;
  border-left:none;
}
body {
 background:pink;
}

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