How to center a rotated child div to a rotated parent div and stick to the top of parent div?

Question

Hopefully, my question is easy to understand. I've created a codepen to better show what I'm trying to achieve.

I have a big diamond shape (actual shapen is rectangular) and using CSS I rotate them to make a diamond shape. I then put a small image (which I rotate also) on top of the image and stick the second image to the top center of the main image.

This work well for desktop and tablet but the issue I'm having is when viewing on mobile. Since there are many different sizes of mobile width, the second image (the orange color) get cut off when viewing on iPhone 8 but look perfect on iPhone X.

I know I can target media query for different devices but I don't think that will work as there are way too many mobile sizes.

I think the most logical is to find the second image div to make it center horizontally? but since it is rotated, there is no way for me to find them.

Any suggestion will help. Thank you guys.

<div class="box"> 

<div class="diamond-content space-default">
        <div class="diamond-shape">
  <div class="bg"><img src="https://i.postimg.cc/dQ2RMQ3m/sample.jpg" class="img-fluid"></div>
            <div class="logo"><img src="https://i.postimg.cc/jSPtc1Z5/sample2.png" class="img-fluid"></div>
        </div>
          <div class="diamond-shape">
  <div class="bg"><img src="https://i.postimg.cc/dQ2RMQ3m/sample.jpg" class="img-fluid"></div>
            <div class="logo"><img src="https://i.postimg.cc/jSPtc1Z5/sample2.png" class="img-fluid"></div>
        </div>
    </div>
</div>

.box {
  margin-top: 200px;
}

.diamond-content {
    position: relative;
  display: flex;
  align-items: center;
      max-width: 1200px;

}

.diamond-shape {
    position: relative;
    width: 200px;
    height: 200px;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    margin: 0 auto;
    overflow: hidden;
}


@media (min-width: 768px) {
    .diamond-shape {
        width: 350px;
        height: 350px;
    }
}

@media (min-width: 992px) {
    .diamond-shape {
        width: 420px;
        height: 420px;
    }

    .diamond-shape.right {
        margin: 0 auto 0 -100px;
    }
}

@media (min-width: 1200px) {
    .diamond-shape {
        width: 480px;
        height: 480px;
    }
}

/*Content Inside Diamond*/


.diamond-shape img {
    transform: rotate(45deg);
}


.diamond-shape .logo {
    position: relative;
    width: 80px;
    z-index: 2;
    margin: -12px 0 0 132px;
}

@media (min-width: 768px) {
    .diamond-shape .logo {
        width: 120px;
        margin: -18px 0 0 248px;
    }
}

@media (min-width: 992px) {
    .diamond-shape .logo {
        width: 130px;
        margin: -20px 0 0 310px;
    }
}

@media (min-width: 1200px) {
    .diamond-shape .logo {
        width: 150px;
        margin: -22px 0 0 352px;
    }
}

.diamond-shape .bg {
    position: absolute;
    width: 302px;
    margin: -57px 0px 0 -57px;
}

@media (min-width: 768px) {
    .diamond-shape .bg {
        width: 510px;
        margin: -100px 0px 0 -100px;
    }
}

@media (min-width: 992px) {
    .diamond-shape .bg {
        width: 680px;
    }
}

https://codepen.io/anon/pen/RXVjog

Answer 1

Replace your whole CSS with this one and the orange diamond (.logo) will always be at the center top because it is set to position absolute and right 0.

Here's fixed CodePen https://codepen.io/lakialex/pen/LwyeOm

.box {
  margin-top: 200px;
}

.diamond-content {
    position: relative;
  display: flex;
  align-items: center;
      max-width: 1200px;

}

.diamond-shape {
    position: relative;
    width: 200px;
    height: 200px;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    margin: 0 auto;
    overflow: hidden;
}


@media (min-width: 768px) {
    .diamond-shape {
        width: 350px;
        height: 350px;
    }
}

@media (min-width: 992px) {
    .diamond-shape {
        width: 420px;
        height: 420px;
    }

    .diamond-shape.right {
        margin: 0 auto 0 -100px;
    }
}

@media (min-width: 1200px) {
    .diamond-shape {
        width: 480px;
        height: 480px;
    }
}

/*Content Inside Diamond*/


.diamond-shape img {
    transform: rotate(45deg);
}




.diamond-shape .bg {
    position: absolute;
    width: 302px;
    margin: -57px 0px 0 -57px;
}

@media (min-width: 768px) {
    .diamond-shape .bg {
        width: 510px;
        margin: -100px 0px 0 -100px;
    }
}

@media (min-width: 992px) {
    .diamond-shape .bg {
        width: 680px;
    }
}

.diamond-shape .logo {
    position: absolute;
    width: 80px;
    z-index: 2;
    margin: 0;
    right: 0;
    margin-right: -11px;
    margin-top: -11px;
}

@media (min-width: 768px) {
    .diamond-shape .logo {
        width: 120px;
        margin-right: -17px;
        margin-top: -17px;
    }
}

@media (min-width: 992px) {
    .diamond-shape .logo {
        width: 130px;
        margin-right: -17px;
        margin-top: -17px;
    }
}

@media (min-width: 1200px) {
    .diamond-shape .logo {
        width: 150px;
        margin-right: -21px;
        margin-top: -21px;
    }
}

Answer 2

Add this for center div

.diamond-content {
position: relative;
display: flex;
align-items: center;
max-width: 1200px;
margin: auto;

}

Answer 3

Set a min-width and min-height to diamond shape.

min-width: 200px;
min-height: 200px;