純CSS方式使div底部的進度條？

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的邊框寬度，則需要同時調整pseudoelement height和bottom位置。

還要注意border-radius 。 您可以設置特定的角以在pseudoelement上pseudoelement圓以匹配容器。

 .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; } 

 <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 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;
}