How can I position images in four corners to collectively form a circle?

I was trying to make this specific design in CSS but I couldn't figure out a way to do it .

The code I tried didn't give me the result and I don't know what I'm doing wrong .

The images I got are already rounded corners so I just need to place them in the corners of rectangles so I can add some text later on.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  background-color: red;
}

.rectangle {
  position: relative;
  flex-basis: calc(50% - 20px);
  height: 150px;
  margin: 10px;
  background-color: blue;
}

.rectangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rectangle:nth-child(1) img {
  position: absolute;
  bottom: 0;
  right: 0;
}

.rectangle:nth-child(2) img {
  position: absolute;
  bottom: 0;
  left: 0;
}

.rectangle:nth-child(3) img {
  position: absolute;
  top: 0;
  right: 0;
}

.rectangle:nth-child(4) img {
  position: absolute;
  top: 0;
  left: 0;
}

<!-- language: lang-html -->

<div class="container">
  <div class="row">
    <div class="rectangle">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="rectangle">
      <img src="image2.jpg" alt="Image 2">
    </div>
  </div>
  <div class="row">
    <div class="rectangle">
      <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="rectangle">
      <img src="image4.jpg" alt="Image 4">
    </div>
  </div>
</div>

<!-- end snippet -->

Reasons why you are not getting the intended result:

• <div class="container"> uses flexbox so the two child <div class="row"> are positioned horizontally side-by-side. <div class="rectangle"> is block level and is positioned vertically above/below each other. Therefore, what you intended to be rows are actually columns.

• Your :nth-child(3) and :nth-child(4) selectors don't match anything because there are only two <div class="rectangle"> child elements of each <div class="row"> (you could have used :nth-of-type())

• .rectangle {flex-basis: calc(50% - 20px)} has no effect because <div class="row"> is not a flex container

• After removing the <div class="row"> containers, another apparent issue is the images cover the entire div due to these declarations that should be removed:

.rectangle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

We get the desired positioning after making those corrections:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: red;
}

.rectangle {
  position: relative;
  flex-basis: calc(50% - 20px);
  height: 150px;
  margin: 10px;
  background-color: blue;
}

.rectangle img {
  position: absolute;
}

.rectangle:nth-child(1) img {
  bottom: 0;
  right: 0;
}

.rectangle:nth-child(2) img {
  bottom: 0;
  left: 0;
}

.rectangle:nth-child(3) img {
  top: 0;
  right: 0;
}

.rectangle:nth-child(4) img {
  top: 0;
  left: 0;
}

<!-- language: lang-html -->

<div class="container">
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?1" alt="Image 1">
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?2" alt="Image 2">
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?3" alt="Image 3">
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?4" alt="Image 4">
  </div>
</div>

<!-- end snippet -->

<br>

However, now you'll discover that the images are placed on top of other content. The images should be used as the background image for this effect.

.rectangle {
  background-repeat: no-repeat;
}

.rectangle:nth-child(1) {
  background-image: url(//picsum.photos/100?1);
  background-position: bottom 0 right 0;
}

.rectangle:nth-child(2) {
  background-image: url(//picsum.photos/100?2);
  background-position: bottom 0 left 0;
}

.rectangle:nth-child(3) {
  background-image: url(//picsum.photos/100?3);
  background-position: top 0 right 0;
}

.rectangle:nth-child(4) {
  background-image: url(//picsum.photos/100?4);
  background-position: top 0 left 0;
}

<br>

To fix the double margin around the flex items, declare gap and padding on the container and adjust the flex-basis calculation.

.container {
  gap: 10px;
  padding: 10px;
}

.rectangle {
  flex-basis: calc(50% - 5px);
}

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: red;
}

.rectangle {
  flex-basis: calc(50% - 5px);
  height: 150px;
  background-color: blue;
  background-repeat: no-repeat;
}

.rectangle:nth-child(1) {
  background-image: url(//picsum.photos/100?1);
  background-position: bottom 0 right 0;
}

.rectangle:nth-child(2) {
  background-image: url(//picsum.photos/100?2);
  background-position: bottom 0 left 0;
}

.rectangle:nth-child(3) {
  background-image: url(//picsum.photos/100?3);
  background-position: top 0 right 0;
}

.rectangle:nth-child(4) {
  background-image: url(//picsum.photos/100?4);
  background-position: top 0 left 0;
}

<!-- language: lang-html -->

<div class="container">
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
  </div>
</div>

<!-- end snippet -->

<br>

Regarding your comment about using components: I don't have any knowledge of using components. Would it be possible to declare the value for background-image: url() in a <style> block on the page?

<style>
  .rectangle:nth-child(1) {
    background-image: url(//picsum.photos/100?1);
  }

  .rectangle:nth-child(2) {
    background-image: url(//picsum.photos/100?2);
  }

  .rectangle:nth-child(3) {
    background-image: url(//picsum.photos/100?3);
  }

  .rectangle:nth-child(4) {
    background-image: url(//picsum.photos/100?4);
  }
</style>

<br>

If you must use <img>, this can be done using the z-index property. (This will require all text in <div class="rectangle"> to be inside child elements.) Using z-index for this result can potentially conflict with other elements on the page (present or future) that also use z-index.

.rectangle > * {
  position: relative;
  z-index: 1;
}

.rectangle img {
  position: absolute;
  z-index: 0;
}

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: red;
}

.rectangle {
  position: relative;
  flex-basis: calc(50% - 5px);
  height: 150px;
  background-color: blue;
}

.rectangle > * {
  position: relative;
  z-index: 1;
}

.rectangle img {
  position: absolute;
  z-index: 0;
}

.rectangle:nth-child(1) img {
  bottom: 0;
  right: 0;
}

.rectangle:nth-child(2) img {
  bottom: 0;
  left: 0;
}

.rectangle:nth-child(3) img {
  top: 0;
  right: 0;
}

.rectangle:nth-child(4) img {
  top: 0;
  left: 0;
}

<!-- language: lang-html -->

<div class="container">
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?1" alt="Image 1">
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?2" alt="Image 2">
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?3" alt="Image 3">
  </div>
  <div class="rectangle">
    <h2>Lorem Ipsum</h2>
    <p><cite>Lorem ipsum</cite> is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p>
    <img src="//picsum.photos/100?4" alt="Image 4">
  </div>
</div>

<!-- end snippet -->

You could use these css properties:

border-top-left-radius: 100%; /* for the top left image */
border-top-right-radius: 100%; /* for the top right image */
border-bottom-right-radius: 100%; /*for the bottom right image */
border-bottom-left-radius: 100%; /* for the bottom left image*/