在SCSS中绘制圆弧

Question

有人可以帮我创建那个蓝色的弧线，上面写着“UND”吗？

到目前为止，我所做的是：

这是我的代码：

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

谢谢

：

我尝试过使用剪辑路径，但没有成功。

Answer 1

这可以通过使

.promotion-circle

元素具有

overflow: hidden

来完成。这样，大圆就可以被其父圆的半径剪切。请注意，这也会剪辑

.currency

元素，因此需要将其放置在

.promotion-circle

元素之外。这可以通过包装元素来实现，就像这样。

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