Position div on the border of another div

Question

I am trying to make a user-information box where there is an avatar and some additional information. I want that avatar to stay on the border of that container, vertically translated as in the example below.

However, as you can see, when I translate the element some part of it becomes invisible, since the content is not "pushed" down. How can I achieve the same result, but properly displaying the image? I tried playing with position: absolute and top and bottom, but I wasn't able to achieve the desired result.

Note: in my app, a div with class="profile-info-container" is inside a Bootstrap col, that's why width is set to 100%.

Thank you!

.profile-info-container {
  background-color: white;
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  margin: 20px 10px;
  position: relative;
  text-align: center;
  min-height: 300px;
  height: auto;
  width: 100%
}

.profile-info-image {
  transform: translateY(-50%) rotate(45deg);
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
  </div>
</div>

Answer 1

Instead of using translate, you can create a CSS Grid layout here:

• make profile-info-container a grid container,

• place profile-info-image in the first column spanning two rows,

• the text below the image in the third row,

• the border background is made using a pseudo element that spans the second and third rows.

See demo below:

.profile-info-container {
  background-color: white;
  margin: 20px 10px;
  min-height: 300px;
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  display: grid; /* grid container */
}

.profile-info-container::after {
  content: '';
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  grid-row: 2 / 4; /* row 2 and 3*/
  grid-column: 1; /* column 1 */
}

h2 {
  grid-row: 3; /* row 3 */
  grid-column: 1; /* column 1 */
}

.profile-info-image {
  transform: rotate(45deg); /* <-- removed translate */
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  grid-row: 1 / 3; /* row 1 and 2 */
  grid-column: 1; /* column 1 */
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
    <h2>Some text here</h2>
  </div>
</div>

Answer 2

I think you can remove the transform:rotate for your image section to center the avatar image. I have added the margin-top:30% to your content and profile-info-container.

.profile-info-container {
    background-color: white;
    border: 2px solid #7EA2BC;
    border-radius: 10px;
    margin: 20px 10px;
    position: relative;
    text-align: center;
    min-height: 300px;
    height: auto;
    width: 100%;
    margin-top: 30%;
}

.some-text {
    margin-top: 30%;
}

.profile-info-image {
    /*transform: translateY(-50%) rotate(45deg);*/
    border-radius: 100%;
    height: auto;
    margin: auto;
    width: 50%;
    border: 10px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(60deg, red 36%, red 30%), linear-gradient(120deg, yellow 36%, yellow 30%), linear-gradient(240deg, blue 36%, blue 30%);
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    left: 50%;
}

.profile-info-image img {
    /*transform: rotate(-45deg);*/
    border: 1px solid #7ea2bc;
    border-radius: 100%;
    height: 100%;
    width: 100%;
}

.half {
    width: 50%;
}

<div class="half">
    <div class="profile-info-container">
        <div class="profile-info-image">
            <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
        </div>
        <div class="some-text">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </div>
    </div>
</div>