Тень коробки со стилем индикатора выполнения

Question

Я занимаюсь разработкой веб-сайта в этом Я пытаюсь добавить стиль индикатора прогресса (анимации) во вставке тени блока, используя CSS .Но это не сделано идеально.

<table>
  <tr>
    <td style="box-shadow: rgb(112, 173, 71) 6px 0px 0px inset;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="box-shadow: rgb(112, 173, 71) 6px 0px 0px inset;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Я пытаюсь использовать этот стиль полосок во вставке с тенями

Answer 1

Рассмотрите фон вместо box-shadow, затем просто отрегулируйте размер, используя background-size

td {
  background:
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/100% 100% no-repeat;
}

<table>
  <tr>
    <td style="background-size:80% 100%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="background-size:20% 100%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

И с анимацией:

td {
  position:relative;
  z-index:0;
}
td:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:var(--p);
  background:
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/200% 100% no-repeat;
  z-index:-1;
  animation:change 2s linear infinite;
}

@keyframes change {
  to {
    background-position:right;
  }
}

<table>
  <tr>
    <td style="--p:80%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="--p:20%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Другой вид анимации без прозрачности и без псевдоэлемента:

td {
  position:relative;
  z-index:0;
  background:
    linear-gradient(#fff,#fff) right/calc(100% - var(--p)) 100% no-repeat,
    repeating-linear-gradient(45deg,green 0 10px,darkgreen 10px 20px) 0 0/200% 100% no-repeat;
  animation:change 2s linear infinite;
}

@keyframes change {
  to {
    background-position:right;
  }
}

<table>
  <tr>
    <td style="--p:80%;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="--p:20%;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
  <table>

Answer 2

Может вам поможет код ниже

<table>
  <tr>
    <td style="  
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;">
      <span style="padding-left:10px;font-size:25px">Style one</span>
    </td>
    <td style="box-shadow: 20px 19px 26px rgb(112, 173, 71)  inset;">
      <span style="padding-left:10px;font-size:25px">Style two</span>
    </td>
  </tr>
<table>