Draw a Arc in SCSS

Could someone help me create that blue arc with 'UND' written on it as in the following image?

So far, what I've managed to do is this: enter image description here

Here are my codes:

.promotion-circle {
  position: absolute;
  width: 80px;
  /* Ajuste o tamanho do círculo conforme necessário */
  height: 80px;
  border-radius: 50%;
  /* Transforma em um círculo */
  background-color: #e41818;
  /* Cor do círculo */
  // background-color: #082a83; /* Cor do círculo */
  z-index: 1;
  /* Para garantir que fique sobre a imagem */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eec914;
  /* Cor do texto */
  font-weight: bold;
  /* Texto em negrito */
  top: 110px;
  /* Ajuste a posição vertical do círculo */
  left: 50%;
  /* Ajuste a posição horizontal do círculo */
  transform: translateX(-50%);
  /* Centraliza horizontalmente */
  box-shadow: 4px 1px #082a83;
}

.currency {
  position: absolute;
  width: 30px;
  /* Ajuste o tamanho do círculo conforme necessário */
  height: 30px;
  border-radius: 50%;
  /* Transforma em um círculo */
  background-color: #082a83;
  /* Cor de fundo para "R$" */
  z-index: 2;
  /* Para garantir que fique sobre a imagem */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  /* Cor do texto */
  font-weight: bold;
  /* Texto em negrito */
  left: -5%;
  /* Ajuste a posição horizontal do círculo */
  transform: translateX(-50%);
  /* Centraliza horizontalmente */
}

<div class="promotion-circle">
  <div class="promotion-unit ">UN</div>
  <span class="reais">{{ product.salePrice.split(',')[0] }}</span>
  <span class="centavos">,{{ product.salePrice.split(',')[1] }}</span>
  <div class="currency">R$</div>
  <!-- Elemento com "R$" -->
</div>
<!-- Elemento do círculo de promoção com o preço separado -->

Thanks

I want my code to look like this image:

I've tried to use clip path, but don`t have sucess.

Solution

We can use radial-gradient to get the red blue background:

.promotion-circle {
  width: var(--size);
  height: var(--size);
  font-size: var(--font-size);
  position: relative;
  display: flex;
  font-weight: bold;
  font-family: monospace;
  background: 
    radial-gradient(120% 40% at 50% 85%, #082A83 0 22%, transparent 22%),
    radial-gradient(145% 25% at 52% 83%, #082A83 0 22%, transparent 22%),
    radial-gradient(165% 25% at 52% 80%, #082A83 0 22%, transparent 22%),
    radial-gradient(circle at 49% 49%, #f00 0, #c00101 62%, transparent 62%),
    radial-gradient(circle at 52% 51%, #082A83 0 64%, transparent 64%);
}

.promotion-unit {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.3em;
}

.price {
  margin: auto;
  color: #FFFF00;
}

.reais {
  font-size: 3em;
}

.centavos {
  font-size: 1em;
  vertical-align: 1.5em;
}

.currency {
  display: flex;
  width: 25%;
  height: 25%;
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  border-radius: 50%;
  font-size: 1.2em;
  background-color: #082A83;
}

.currency>* {
  margin: auto;
}


/* for demo purpose */

.one, .two {
  display: inline-block;
}

.one {
  --size: 80px;
  --font-size: 0.6rem;
}

.two {
  --size: 140px;
  --font-size: 1rem;
}

<div class="one">
  <div class="promotion-circle">
    <div class="promotion-unit">UND</div>
    <div class="price">
      <span class="reais">9</span><span class="centavos">,99</span>
    </div>
    <div class="currency"><span>R$</span></div>
  </div>
</div>

<div class="two">
  <div class="promotion-circle">
    <div class="promotion-unit">UND</div>
    <div class="price">
      <span class="reais">9</span><span class="centavos">,99</span>
    </div>
    <div class="currency"><span>R$</span></div>
  </div>
</div>