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

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 >
    <span ></span>
    <div >
        <p>Hello, world!</p>
    </div>
    <span ></span>
</div>

CodePudding user response：

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 >
    <div >
        <span ></span>
        <p>Hello, world!</p>
        <span ></span>
    </div>
</div>

CodePudding user response：

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 >
  <span ></span>
  <div >
    <p>Hello, world!</p>
  </div>
  <span ></span>
</div>