How to place a red circle in top right corner of centered div?

Question

I have a little css problem, and i dont know of its completely possible to do this in css, but i accept any other solution aswell. Here i have an example of what i am trying to accomplish.

I am trying to add the red circles in the top right of the divisions. My code sofar:

<div class="w3-container customheight">
  <div class="center buttons">
    <a class="todo roundbutton">
      <div class="redicon"></div>
      <div class="redicontext">
        <span class="todotext">1</span>
      </div>
    </a>
    <a class="decision roundbutton">
      <div class="redicontext">
        <span class="decisiontext">2</span>
      </div>
    </a>
    <a class="remark roundbutton">
      <div class="redicontext"></div>
        <span class="remarktext">3</span>
      </div>
    </a>
  </div>
</div>

.center{
  margin: 0 auto;
}
.roundbutton{
  width: calc(33.333% - 20px);
  height: 100%;
  margin: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  display:block;
  background-size: contain;
  float:left;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

.todo{
  background-image: url("../img/todo.jpg"); 
}

.decision{
  background-image: url("../img/decision.jpg"); 
}

.remark{
  background-image: url("../img/remark.jpg"); 
}   

.redicon{
  position: absolute;
  top: 10px;
  left: 3%;
  background: red;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;

}

.redicontext{
  position: absolute;
  top: 10px;
  right: 3%;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;
}

I tried multiple things already: - creating another div behind the first one to use padding on that div without creating an ovale - absolute values for the red circles, this can be used with a certain height and width, but it has to work responsive.

I am not that good in css, but i know the basics. Any help on this is really nice!

Greetings!

Answer 1

Use a relative position and position the circle.

.redicon{
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  padding:10px;
  box-sizing: border-box;
  border-radius: 100%;
}

Snippet

 .center{ margin: 0 auto; } .roundbutton{ width: calc(33.333% - 20px); height: 130px; margin: 10px; margin-top: 20px; margin-bottom: 20px; display:block; background-size: contain; float:left; background-repeat: no-repeat; background-position: center center; position: relative; } .todo{ background-image: url("//placehold.it/150"); background-color: #fff; border-radius: 100%; } .decision{ background-image: url("//placehold.it/150"); background-color: #fff; border-radius: 100%; } .remark{ background-image: url("//placehold.it/150"); background-color: #fff; border-radius: 100%; } .redicon{ position: absolute; top: -10px; right: -10px; background: red; padding:10px; box-sizing: border-box; border-radius: 100%; } .redicontext{ position: absolute; top: 10px; right: 3%; padding:10px; box-sizing: border-box; border-radius: 100%; } 

 <div class="w3-container customheight" style="width: 450px;"> <div class="center buttons"> <a class="todo roundbutton"> <div class="redicon"></div> <div class="redicontext"> <span class="todotext">1</span> </div> </a> <a class="decision roundbutton"> <div class="redicontext"> <span class="decisiontext">2</span> </div> </a> <a class="remark roundbutton"> <div class="redicontext"> <span class="remarktext">3</span> </div> </a> </div> </div> 

Preview