i need help to create badge like shown in image like cloud or bubble type of badge using css

Question

i am working on project where some products have to show discount so i need this type of badge using CSS.

can any one help me

thank you.

Answer 1

a {
  text-decoration: none;
}
.firstLine {
  font-size: 24px;
  font-weight: 300;
}
.secondLine {
  font-size: 36px;
  line-height: 36px;
  font-weight: 600;
}
.thirdLine {
  font-size: 26px;
  line-height: 32px;
  font-weight: 300;
}
.fourthLine {
  font-size: 12px;
  font-weight: 300;
  position: relative;
  top: -10px;
}

.badges {
  position: relative;
  margin: 40px auto;
  width: 200px;
  height: 200px;
  background: #009700;
  border-radius: 100%;
  color: #fff;
  line-height: 25px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  -webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
  -moz-animation: 3s ease-in-out 0s normal none infinite running swing;
  -o-animation: 3s ease-in-out 0s normal none infinite running swing;
  animation: 3s ease-in-out 0s normal none infinite running swing;

  -webkit-transform-origin: 100px -71px;
  -moz-transform-origin: 100px -71px;
  -o-transform-origin: 100px -71px;
  transform-origin: 100px -71px;
}
.badges:before {
  content: "";
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  -webkit-box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700,
    20px -98px #009700, 39px -94px #009700, 56px -85px #009700,
    71px -72px #009700, 83px -57px #009700, 93px -40px #009700,
    98px -20px #009700, 100px 0px #009700, -20px -98px #009700,
    -39px -94px #009700, -71px -72px #009700, -56px -85px #009700,
    -83px -57px #009700, -93px -40px #009700, -98px -20px #009700,
    -100px 0px #009700, 0px 100px #009700, -20px 98px #009700,
    -39px 94px #009700, -56px 85px #009700, -71px 72px #009700,
    -83px 57px #009700, -93px -40px #009700, -98px 20px #009700,
    -93px 40px #009700, 20px 98px #009700, 39px 94px #009700, 56px 85px #009700,
    71px 72px #009700, 83px 57px #009700, 93px 40px #009700, 98px 20px #009700;

  -moz-box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700,
    20px -98px #009700, 39px -94px #009700, 56px -85px #009700,
    71px -72px #009700, 83px -57px #009700, 93px -40px #009700,
    98px -20px #009700, 100px 0px #009700, -20px -98px #009700,
    -39px -94px #009700, -71px -72px #009700, -56px -85px #009700,
    -83px -57px #009700, -93px -40px #009700, -98px -20px #009700,
    -100px 0px #009700, 0px 100px #009700, -20px 98px #009700,
    -39px 94px #009700, -56px 85px #009700, -71px 72px #009700,
    -83px 57px #009700, -93px -40px #009700, -98px 20px #009700,
    -93px 40px #009700, 20px 98px #009700, 39px 94px #009700, 56px 85px #009700,
    71px 72px #009700, 83px 57px #009700, 93px 40px #009700, 98px 20px #009700;

  -o-box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700, 20px -98px #009700,
    39px -94px #009700, 56px -85px #009700, 71px -72px #009700,
    83px -57px #009700, 93px -40px #009700, 98px -20px #009700,
    100px 0px #009700, -20px -98px #009700, -39px -94px #009700,
    -71px -72px #009700, -56px -85px #009700, -83px -57px #009700,
    -93px -40px #009700, -98px -20px #009700, -100px 0px #009700,
    0px 100px #009700, -20px 98px #009700, -39px 94px #009700,
    -56px 85px #009700, -71px 72px #009700, -83px 57px #009700,
    -93px -40px #009700, -98px 20px #009700, -93px 40px #009700,
    20px 98px #009700, 39px 94px #009700, 56px 85px #009700, 71px 72px #009700,
    83px 57px #009700, 93px 40px #009700, 98px 20px #009700;

  box-shadow: 0px -82px 0px -2px #009700, 0px -100px #009700, 20px -98px #009700,
    39px -94px #009700, 56px -85px #009700, 71px -72px #009700,
    83px -57px #009700, 93px -40px #009700, 98px -20px #009700,
    100px 0px #009700, -20px -98px #009700, -39px -94px #009700,
    -71px -72px #009700, -56px -85px #009700, -83px -57px #009700,
    -93px -40px #009700, -98px -20px #009700, -100px 0px #009700,
    0px 100px #009700, -20px 98px #009700, -39px 94px #009700,
    -56px 85px #009700, -71px 72px #009700, -83px 57px #009700,
    -93px -40px #009700, -98px 20px #009700, -93px 40px #009700,
    20px 98px #009700, 39px 94px #009700, 56px 85px #009700, 71px 72px #009700,
    83px 57px #009700, 93px 40px #009700, 98px 20px #009700;
}

<a href="#">
    <div class="badges"><br>
        <p><br>
            <span class="firstLine">GET UP TO</span><br>
            <span class="secondLine">50%</span><br>
            <span class="thirdLine">off</span>
        </p>
    </div>
</a>