Some thing like this?
.box{
width: 200px;
height: 100px;
border: 5px solid #666;
margin: 50px;
position: relative;
}
.circle{
width: 80px;
height: 80px;
border-radius: 50%;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
color: #fff;
position: absolute;
right: -40px;
top: -40px;
}
p{
font-weight: bold;
display:flex;
flex-direction: column;
font-weight: bold;
font-size: 30px;
text-align: center;
}
p span{
font-weight: normal;
font-size: .5em
}
<div class="box">
<div class="circle">
<p>20%<span>OFF</span></p>
</div>
</div>
2
solved how to make circle on html div with some text? [closed]