css - create a circle at the bottom right position of an element - html

Question

I'm trying to come up with a system where I can easily place a small circle at the top left and bottom right of a container element - an element that will be dynamic in size using flex or grid etc.
I managed to get the top-left circle appearing in the right place (c-tl) but I can't figure out how to get the bottom-right circle appearing at the other end of the border line.
I've tried messing around with different display types on different elements (e.g. the blue circle) and ::after selectors on various elements (e.g. the orange circle)... I'm sure there's an easy way but I'm certainly not a css expert!
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
}
.c-tl {
height: 10px;
width: 10px;
border-radius:5px;
background-color: grey;
display: block;
position: relative;
top: 5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius:5px;
background-color: orange;
display: block;
}
.ele::after{
content: "";
height: 10px;
width: 10px;
border-radius:5px;
background-color: blue;
display: block;
}
<div class="container">
<span class="c-tl"></span>
<div class="ele">
<p>Hello, world!</p>
</div>
<span class="c-br"></span>
</div>

Answer 1

You can use position: absolute; with bottom: 0; and right: 0; to position the desired element on the bottom right corner of its parent element which must have position: relative;.
In your case:
the .c-tl and .c-br must be placed in .ele (the element relative which the circles are placed)
add position: relative; to .ele
add position: absolute; to both .c-tl and .c-br, and their corresponding top/bottom & left/right values set.
Reference (last example)
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
position: relative;
}
.c-tl {
height: 10px;
width: 10px;
border-radius:5px;
background-color: grey;
display: block;
position: absolute;
top: -5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius:5px;
background-color: orange;
display: block;
position: absolute;
bottom: -5px;
right: -5px;
}
.ele::after{
content: "";
height: 10px;
width: 10px;
border-radius:5px;
background-color: blue;
display: block;
}
<div class="container">
<div class="ele">
<span class="c-tl"></span>
<p>Hello, world!</p>
<span class="c-br"></span>
</div>
</div>

Answer 2

I added the following to your c-br class.
float: right;
position: relative;
top: -5px;
right: -5px;
It seems to work in both views, including full screen.
.container {
margin: 0;
padding: 2rem;
}
.ele {
padding: 2rem;
border-bottom-left-radius: 1rem;
border-left: solid 1px grey;
border-bottom: solid 1px grey;
}
.c-tl {
height: 10px;
width: 10px;
border-radius: 5px;
background-color: grey;
display: block;
position: relative;
top: 5px;
left: -5px;
}
.c-br {
height: 10px;
width: 10px;
border-radius: 5px;
background-color: orange;
display: block;
float: right;
position: relative;
top: -5px;
right: -5px;
}
.ele::after {
content: "";
height: 10px;
width: 10px;
border-radius: 5px;
background-color: blue;
display: block;
}
<div class="container">
<span class="c-tl"></span>
<div class="ele">
<p>Hello, world!</p>
</div>
<span class="c-br"></span>
</div>