html - 如何在矩形右侧创建新月边界半径？

Question

我正在尝试创建这样的按钮

我只是不知道要搜索什么来创建这样的形状。

这是迄今为止我所拥有的。

.rectangle {
  height: 50px;
  width: 200px;
  background-color: #555;
  border-radius: 10px 0px 0px 10px;
}

.radius_rectangle {
  width: 90px;
  background: red;
  height: 50px;
  border-radius: 0px 40px 40px 0px;
}

<div class="rectangle">
  <div class="radius_rectangle">
  </div>
</div>

如果有人可以帮助我，我将不胜感激。

标签： htmlcss

Answer 1

您快到了。设置overflow:hidden为.rectangle，注意border-radius角落。你还需要.radius_rectangle向右移动——我用过margin-left:auto. 另一种方法是设置text-align:right为.rectangle。

.rectangle {
  height: 50px;
  width: 200px;
  overflow: hidden;
  background: #555;
  border-radius: 40px 0 0 40px;
  box-shadow: 0 0 3px 0 #000;
}

.radius_rectangle {
  width: 130px;
  height: 50px;
  margin-left: auto;
  background: #fff;
  border-radius: 40px 0 0 40px;
}

<div class="rectangle">
  <div class="radius_rectangle"></div>
</div>