Q&A
質問者さんは、現状の見た目をどのように修正したいのでしょうか？可能であれば、図などを用いてもう少し詳しく教えていただけませんか？
前提・実現したいこと
経験値を表示するための経験値バーをCSS(HTML)で作成しています。
経験値割合は経験値バーの長さ(width)のために取得しました。
※経験値割合＝１００×現在経験値÷最大経験値 とします。
しかし、画面の大きさおよび経験値割合が小さすぎると、角丸の円の幅の影響で正常に描けない問題がありました。
今回は↑の問題を直す方法を知りたいです。
該当のソースコード
html
1<html style="width: 200px"> 2 <body> 3 <p>経験値割合が100%の場合</p> 4 <div style="background-color: #41A077; border-radius: 4px;"> 5 <div style="background-color: #61EDB0; border-radius: 4px; height:6px; width:100%"></div> 6 </div> 7 <p>経験値割合が50%の場合</p> 8 <div style="background-color: #41A077; border-radius: 4px;"> 9 <div style="background-color: #61EDB0; border-radius: 4px; height:6px; width:50%"></div> 10 </div> 11 <p>経験値割合が1%の場合</p> 12 <div style="background-color: #41A077; border-radius: 4px;"> 13 <div style="background-color: #61EDB0; border-radius: 4px; height:6px; width:1%"></div> 14 </div> 15 </body> 16</html>
よろしくお願いします。
回答2件
0
もし角丸を保持したいのであれば、 width プロパティを変更するのではなく、親要素と同等の横幅を持つ要素を transform プロパティにより横方向へ移動させることによって、質問者さんの実現したいことが行えます (動作確認用リンク)。この方法でもカスタムプロパティを使うことで、パーセンテージによって直感的に値を管理できるため、 width プロパティの値を変化させる方法からの大きな変更は必要ありません。また、 width プロパティを変化させてゆく場合、 border-radius プロパティの原理的にもある程度横幅が小さくなると元の角丸の状態を維持出来ないと思います。
HTML
1<div style="width: 200px"> 2 <p>経験値割合が100%の場合</p> 3 <div style="background-color: #41A077; border-radius: 4px;"> 4 <div style="background-color: #61EDB0; border-radius: 4px; height:6px; --w:100%"></div> 5 </div> 6 <p>経験値割合が50%の場合</p> 7 <div style="background-color: #41A077; border-radius: 4px;"> 8 <div style="background-color: #61EDB0; border-radius: 4px; height:6px; --w:50%"></div> 9 </div> 10 <p>経験値割合が1%の場合</p> 11 <div style="background-color: #41A077; border-radius: 4px;"> 12 <div style="background-color: #61EDB0; border-radius: 4px; height:6px; --w:1%"></div> 13 </div> 14</div>
CSS
1div { 2 overflow: hidden; 3} 4 5div > div { 6 transform: translateX(calc(-100% + var(--w))); 7 width: 100%; 8}
投稿2019/10/30 03:59
総合スコア14731
0
ベストアンサー
外側（深緑色の方）の要素に、overflow: hidden; を足してみてはいかがでしょうか？
内側（明るい緑色の方）の要素が、外側の角丸からはみ出なくなるため
下記添付画像のような形になるかと思います。
※内側の要素の右側を丸くすることは、この方法ではできません。
投稿2019/10/30 03:18
総合スコア296
あなたの回答
tips
プレビュー
