在CSS底部创建进度条的纯CSS方式？

Question

我试图在下面制作这个模型的纯CSS版本。

理想情况下，

• 无论内部名称（最多15个字符），宽度都是常数，
• 右侧的图标面板始终存在，
• 但图标本身可以是可见/不可见的并保持其定位

这不是真的有效，但我最大的挑战是底部的exp栏。是否有一种纯粹的CSS方式来实现这种动态？我猜两个div，一个是100％的宽度，另一个是最好的，只需要％。

到目前为止，我能够做到这一点：

.sprite {
  vertical-align:middle;
}

.exp, .info, .pkmn_special {
  display: inline-block;
}

.pkmn_special {
  background-color: rgba(142,109,146,0.55);
}

.info {
  width: 230px;
  background: linear-gradient(15deg,#745fb5,#9a6dbb);
  background: #745fb5;
  color: white;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(102,119,136,0.55);
  text-shadow: 0 1px 1px rgba(51,68,85,0.3);
  white-space: nowrap;
  border-bottom: solid 5px grey;
}

.pkmn_name {
  font-size: 1.2em;
}

<div class="info">
<img class="sprite" src="https://cdn.bulbagarden.net/upload/e/ea/113MS.png" />
<code class="pkmn_name">15Characterssss</code>
  <div class="pkmn_special">
    <img src="https://cdn.bulbagarden.net/upload/c/c5/Leaf_Crown_Sprite.png" />
    <img src="https://image.ibb.co/kB8vi6/heart.png">
    <img src="https://image.ibb.co/e7w4bR/Shiny_VIStar.png">
  </div>
  <div class="exp"> </div>
</div>

正如您所看到的，它看起来非常糟糕。 有人能帮助我吗？谢谢

Answer 1

您可以使用pseudoelement。

根据需要更新width。

如果您更改.info的边框宽度，则需要调整height的{​​{1}}和bottom位置。

同时跟踪pseudoelement。您可以在border-radius上将特定角设置为圆形以匹配容器。

＆＃13;

＆＃13;

pseudoelement

＆＃13;

.sprite {
  vertical-align: middle;
}

.exp,
.info,
.pkmn_special {
  display: inline-block;
}

.pkmn_special {
  background-color: rgba(142, 109, 146, 0.55);
}

.info {
  width: 230px;
  background: linear-gradient(15deg, #745fb5, #9a6dbb);
  background: #745fb5;
  color: white;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
  text-shadow: 0 1px 1px rgba(51, 68, 85, 0.3);
  white-space: nowrap;
  border-bottom: solid 5px grey;
  position: relative;
  
}

.info:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 5px;
  background: green;
  width: 60%;
  display: inline-block;
  border-radius: 0 0 3px 3px;
}

.pkmn_name {
  font-size: 1.2em;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

.sprite {
  vertical-align: middle;
}

.exp,
.info,
.pkmn_special {
  display: inline-block;
}

.pkmn_special {
  background-color: rgba(142, 109, 146, 0.55);
}    
.info {
  width: 230px;
  background: linear-gradient(15deg, #745fb5, #9a6dbb);
  background: #745fb5;
  color: white;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(102, 119, 136, 0.55);
  text-shadow: 0 1px 1px rgba(51, 68, 85, 0.3);
  white-space: nowrap;
  border-bottom: solid 5px grey;
  position: relative;      
}

.info:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 5px;
  background: green;
  width: 60%;
  display: inline-block;
  border-radius: 0 0 3px 3px;
}

.pkmn_name {
  font-size: 1.2em;
}