難易度をあわらすレベルインジケーターのCSSを作ってみた

<div class="nya-difficulty-labels">
<span>易しい</span>
<span>普通</span>
<span>難しい</span>
</div>

<!-- 易しい 30%の例 -->
<div class="nya-difficulty-bar-container">
<div class="nya-difficulty-bar"></div>
<div class="nya-difficulty-cover" style="width: 70%;"></div>
</div>

<div class="nya-difficulty-labels">
<span>易しい</span>
<span>普通</span>
<span>難しい</span>
</div>

<!-- 難しい90%の例 -->
<div class="nya-difficulty-bar-container">
<div class="nya-difficulty-bar"></div>
<div class="nya-difficulty-cover" style="width: 10%;"></div>
</div>

.nya-difficulty-bar-container {
width: 80%;
background-color: #efefef; /* グレー: 残りの部分 */
height: 30px;
border-radius: 15px;
margin: 20px auto;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden; /* コンテナを超えないように */
position: relative;
}

.nya-difficulty-bar {
width: 100%;
height: 100%;
background: linear-gradient(to right, #3498db, #f39c12, #e74c3c); /* 青→オレンジ→赤のグラデーション */
position: absolute;
top: 0;
left: 0;
}

.nya-difficulty-cover {
height: 100%;
background-color: #efefef; /* グレー: カバー部分 */
position: absolute;
top: 0;
right: 0;
}

.nya-difficulty-labels {
display: flex;
justify-content: space-between;
width: 80%;
margin: 10px auto;
font-size: 14px;
color: #333;
}

<div class="nya-difficulty-labels">
<span>0％</span>
<span>50％</span>
<span>100％</span>
</div>

<div class="nya-difficulty-bar-container">
<div class="nya-difficulty-bar"></div>
<div class="nya-difficulty-cover" style="width: 20%;"></div>
</div>