vEPEBv

index.html

<div class="riskometer risk-1" title="Risk score is 1"></div>
<div class="riskometer risk-1" title="Risk score is 1"></div>
<div class="riskometer risk-1" title="Risk score is 1"></div>
<div class="riskometer risk-1" title="Risk score is 1"></div>
<div class="riskometer risk-1" title="Risk score is 1"></div>

style.less

@bgColor: black;
@borderColor: white;

body {
  font-size: 3em;
  background-color: black;
  
  .riskometer {
    border-style: solid;
    border-width: .1em .1em 0;
    border-color: @borderColor;
    width: 5em;
    height: 2.5em;
    background-color: @bgColor;
    border-radius: 5em 5em 0 0;
    display: block;
    overflow: none;
    background: linear-gradient(135deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 50%,
      rgba(255,0,0,0) 51%,
      rgba(255,0,0,1) 100%
    ); /* W3C */
    &:after {
      transition: all;
      content: '';
      display: block;
      height: 2.5em;
      width: .1em;
      background-color: red;
      margin: auto;
      border-radius: 99% 99% .1em .1em;
      transform-origin: 50% 95%;
    }
    &.risk-1:after {
      transform: rotate(-85deg);
    }
  }
}

vEPEBv.markdown

vEPEBv

A Pen by Captain Anonymous on CodePen.

License.