Draw a Arc in SCSS

Issue

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>

Answered By - the Hutt