Как написать CSS часть задания правильно?

Question

По такой картинке требуется написать на html страничку, у меня всё в целом получилось, но по ощущениям код очень кривой и делать это нужно было не так, подскажите пожалуйста как следовало это сделать? код:

.osnova {
    width: 158px;
    height: 58px;
    margin: 10px;
    border: 4px solid;

}
.dopol {
    width: 5px;
    height: 20px;
    background-color: #000;
    margin: -60px 0px 0px 162px;
}
.red{
    width: 60px;
    height: 58px;
    background-color: #ed1c24;
    margin-bottom: 20px
}
.green {
    width: 158px;
    height: 58px;
    background-color:#00a055;
}
.yellow{
    width: 99px;
    height: 58px;
    background-color: #ffc60b;
}
.dopol2 {
    width: 5px;
    height: 20px;
    background-color: #000;
    margin: -40px 0px 0px 162px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Стиль для печати</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body> 
       <div class="osnova"><div class="red"></div><div class="dopol"></div></div>
        <div class="osnova"><div class="yellow"></div><div class="dopol2"></div></div>
        <div class="osnova"><div class="green"></div><div class="dopol2"></div></div>
    </body>
</html>

Answer 1

У меня получилось как-то вот так

.main{
    width: 158px;
    height: 58px;
    margin: 10px;
    border: 4px solid;
}

.main:before{
    content: '';
    width: 5px;
    height: 20px;
    background-color: #000;
    position: absolute;
    transform: translate(162px, 19px)
}

.color{
  height: 58px;
}

.r{
  width: 60px;
  background-color: #ed1c24;
}

.y{
  width: 99px;
  background-color: #ffc60b;
}

.g{
  width: 158px;
  background-color:#00a055;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Стиль для печати</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body> 
      <div class="main"><div class="color r"></div></div>
      <div class="main"><div class="color y"></div></div>
      <div class="main"><div class="color g"></div></div>
    </body>

</html>

Answer 2

Я бы сделал так:

:root
{
  --progress-color-red: #ed1c24;
  --progress-color-yellow: #ffc60b;
  --progress-color-green: #00a055;
}

* { box-sizing: border-box; }
.container
{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress
{
  position: relative;
  
  width: 158px;
  height: 58px;
  
  border: 4px solid #000000;
}

.progress::before
{
  content: "";
  
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translate(100%, -50%);
  
  width: 5px;
  height: 20px;
  
  background-color: #000000;
}

.progress::-webkit-progress-bar
{
  background-color: #FFFFFF;
}

.progress--red::-webkit-progress-value
{
  background-color: var(--progress-color-red);
}

.progress--yellow::-webkit-progress-value
{
  background-color: var(--progress-color-yellow);
}

.progress--green::-webkit-progress-value
{
  background-color: var(--progress-color-green);
}

<div class="container">
  <progress class="progress progress--red" max="100" value="30"></progress>
  <progress class="progress progress--yellow" max="100" value="60"></progress>
  <progress class="progress progress--green" max="100" value="100"></progress>
</div>

БЛОГ НА HUSL

Как написать CSS часть задания правильно?

Ответы (2 шт):