這是我要創建的形狀：
這是我到目前為止所擁有的：
這是我的代碼：
.pill-left {
position: relative;
width: 50px;
height: 50px;
background: #FDA725;
display: inline-block;
border-radius: 100% 100% 0 0;
transform: rotate(-90deg);
}
.pill-right {
position: relative;
width: 50px;
height: 50px;
background: #CED2D9;
display: inline-block;
border-radius: 100% 100% 0 0;
transform: rotate(90deg);
}<div class="pill-left">5
</div>
<div class="pill-right">10
</div>我遇到的兩個問題首先是如何在藥丸中顯示文本而不是旋轉，第二是如何實作斜線。我嘗試了一些東西，例如border-right：50px。我怎樣才能做到這一點？我懷疑這很明顯，但我無法讓它作業。謝謝
uj5u.com熱心網友回復：
您可以使用線性漸變背景來完成此操作：
簡要說明
背景linear-gradient顏色處理兩種藥丸顏色 - 在這里設定相同的位置（例如 48% 和 48%，然后是 52% 和 52%）意味著它們之間沒有混合。
為了獲得完全圓角，我們設定border-radius為元素高度的一半或更大——變大沒有害處，所以 9999px 只是確保它總是大于元素高度。
在這種情況下，您不一定需要display:flex& justify-content，但如果您設定了特定的寬度，它將確保百分比在藥丸的兩端對齊。
.split-pill {
border-radius: 9999px;
padding: 10px;
display: inline-flex;
justify-content:space-between;
background: linear-gradient(-70deg, #FDA725 48%, white 48%, white 52%, #CED2D9 52%);
}
.left {
padding-right: 10px;
}
.right {
padding-left: 10px;
}<div class="split-pill">
<span class="left">10%</span>
<span class="right">50%</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494660.html
上一篇：在右下角對齊單獨區域的按鈕欄