I am facing a CSS challenge and wondering if it is possible to achieve this using CSS or any other alternative solution would be appreciated. Below is an example of what I am trying to achieve.
My goal is to include red circles in the top right corner of the divisions. Here's my current code:
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%;
}
I have already tried various methods including: - Creating another div behind the first one to apply padding without creating an oval shape - Using absolute values for the red circles, which work with specific height and width but need to be responsive.
Although I have a basic understanding of CSS, I still struggle with it. Any assistance on this matter would be greatly appreciated!
Thank you!