<progress max="100" value="70"></progress>
<progress value=".5"></progress>
<progress value=".2" class="bottom"></progress>
<progress max="1000" value="920" class="bottom"></progress>

progress {
  width: 200px;
  height: 40px;
  appearance: none;
  position: relative;
}
progress::-webkit-progress-value {
  background: #7AB317;
  anchor-name: --progress;
}

progress::before {
  /* tooltip setting */
  --b: 1em; /* triangle base */
  --h: .5em; /* triangle height */
  
  position: absolute;
  position-anchor: --progress;
  position-area: top right;
  translate: -50% calc(-1.2*var(--h));
  content: "00%";
  font-family: system-ui,sans-serif;
  font-weight: 900;
  font-size: 1.5em;
  padding: .5em;
  border-radius: .3em;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    calc(50% + var(--b)/2) 100%,
    50% calc(100% + var(--h)),
    calc(50% - var(--b)/2) 100%);
  background: red;
  border-image: conic-gradient(red 0 0) fill 0/
    0 calc(50% - var(--b)/2)/0 0 var(--h) 0;
}
progress.bottom::before {
  position-area: bottom right;
  translate: -50% calc(1.2*var(--h));
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    calc(50% + var(--b)/2) 0,
    50% calc(-1*var(--h)),
    calc(50% - var(--b)/2) 0);
  border-image: conic-gradient(red 0 0) fill 0/
    0 calc(50% - var(--b)/2)/var(--h) 0 0 0;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  grid-template-columns: auto auto;
  gap: 20px;
}