html - 使用 CSS 背景颜色拆分两个链接的按钮

Question

我正在尝试创建两个由 CSS 拆分的链接按钮background-color。

.right-part {
  display: inline-block;
  width: 100px;
  height: 52px;
  background: linear-gradient(110deg, #fff 0%, #fff 50%, #FF7240 50%, #FF7240 100%);
  background-color: #FF7240;
  border-radius: 0px 26px 26px 0px;
}

.left-part {
  display: inline-block;
  width: 100px;
  height: 52px;
  border-radius: 26px;
}

<div class="left-part">left</div>
<div class="right-part">right</div>

背景颜色不填充 div 元素。

标签： htmlcss

Answer 1

您需要给他们一个父 div 并将其设置background-image为父级：

.button {
  display: inline-block;
  background-image: linear-gradient(100deg, #f4bc58 0%, #ed8b48 50%, #FF7240 50%, #FF7240 100%);
  border-radius: 26px;
}

.button > * {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 52px;
}

<div class="button">
  <div class="left-part">left</div>
  <div class="right-part">right</div>
</div>