制作一个盒子，一边是边框半径的药丸，另一边是固定的边框半径

Question

如何制作一个右边有固定边框半径（10px）的框和另一个尺寸的圆角，而不对右边的边框半径进行硬编码，这样它适用于所有尺寸？

为

好

注意好的一个在左侧有完整的圆角。

固定高度很容易：

.pill {
  height: 100px;
  border: 1px solid black;

  border-top-left-radius: 50px; /* 50% of height */
  border-bottom-left-radius: 50px; /* 50% of height */

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

}

但是动态宽度和高度，我不知道如何：

.pill {
  height: 10vh;
  border: 1px solid black;

  /* how to make left corner to be rounded like a pill for any width and height? */
  border-top-left-radius: 50px; /* 50% of height */
  border-bottom-left-radius: 50px; /* 50% of height */

  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;

}

有些答案正在尝试使用基于em或rem的大半径数来解决此问题。这样做不会，因为它会影响右边的边界半径。

Answer 1

我认为它可以解决您的问题

border-top-left-radius: 50em; /* 50% of height */
border-bottom-left-radius: 50em; /* 50% of height */

一些例子：

＆＃13;

＆＃13;

div {
  border: 1px solid black;
  border-top-left-radius: 50em;
  border-bottom-left-radius: 50em;
  border-top-right-radius: 10em;
  border-bottom-right-radius: 10em;
}
.pill1 {
  height: 10vh;
}
.pill2 {
  height: 100vh;
}
.pill3 {
  height: 200px;
}

＆＃13;

<div class="pill1"></div>
<br>
<div class="pill2"></div>
<br>
<div class="pill3"></div>

＆＃13;

＆＃13;

＆＃13;