Question 299327 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    This can be done by making the .promotion-circle element have overflow: hidden. That way, the large circle can be clipped by its parent’s radius. Note that this will also clip the .currency element, so that will need to be placed outside the .promotion-circle element. This can be achieved with a wrapping element, like so.

    .promotion-wrap {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}
.promotion-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    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;
    font-weight: bold;
    box-shadow: 4px 1px #082a83;
    position: relative;
    overflow: hidden;
}
.currency {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #082a83;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    top: calc( 50% - 15px );
    left: -20%;
}
.promotion-unit {
    position: absolute;
    width: 160px;
    height: 160px;
    background-color: #082a83;
    border-radius: 999px;
    text-align: center;
    padding-top: 2px;
    box-sizing: border-box;
    top: 66%;
    left: -55%;
}
    <div class="promotion-wrap">
    <div class="currency">R$</div>
    <div class="promotion-circle">
        <div class="promotion-unit">UN</div>
        <span class="reais">9</span>
        <span class="centavos">,99</span>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search