Как разместить красный круг в правом верхнем углу центрированного div?

У меня есть небольшая проблема css, и я не знаю, возможно ли это сделать в css, но я принимаю любое другое решение.
Вот пример того, чего я пытаюсь достичь.

образец

Я пытаюсь добавить красные круги в правом верхнем углу разделов.
Мой код sofar:

HTML

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

стиль CSS

.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%;
}

Я уже пробовал несколько вещей:
— создание другого div за первым, чтобы использовать прокладку на этом div без создания овале
— абсолютные значения для красных кругов, это может использоваться с определенной высотой и шириной, но он должен работать отзывчивым.

Я не настолько хорош в css, но я знаю основы.
Любая помощь в этом действительно хорошая!

Привет!

1 ответ

  1. Используйте relativeположение и расположите круг.

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

    Фрагмент

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

    Предварительный просмотр