如何通过CSS将四张圆角图片定位在矩形四角以组成圆形？

你的需求是让圆角图片分别位于四个矩形的对应角落，原代码存在几个关键问题：

• .container 使用 display: flex 但默认横向排列，和你嵌套的 row 结构不匹配，导致布局错乱
• .rectangle:nth-child(n) 选择器失效，因为 .rectangle 嵌套在 .row 里，每个 .row 内的 .rectangle 都是第1、2个，无法选中第3、4个目标元素
• 图片设置 width: 100%; height: 100% 会占满整个矩形容器，无法实现角落小图的效果

下面是修正后的代码：

HTML 结构 #

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

CSS 样式 #

.container {
  display: flex;
  flex-direction: column; /* 让两行垂直排列 */
  gap: 20px; /* 控制行之间的间距 */
  background-color: red;
  padding: 10px;
}

.row {
  display: flex;
  gap: 20px; /* 控制同一行内矩形的间距 */
}

.rectangle {
  position: relative;
  flex: 1; /* 让同一行的两个矩形平分宽度 */
  height: 150px;
  background-color: blue;
}

.rectangle img {
  /* 根据你的圆角图片尺寸设置固定大小，示例为60x60 */
  width: 60px;
  height: 60px;
  position: absolute;
  /* 保留图片本身的圆角，无需额外设置border-radius */
}

.bottom-right img {
  bottom: 0;
  right: 0;
}

.bottom-left img {
  bottom: 0;
  left: 0;
}

.top-right img {
  top: 0;
  right: 0;
}

.top-left img {
  top: 0;
  left: 0;
}

关键修改说明： #

1. 给 .container 添加 flex-direction: column，让两行垂直排列，匹配你的结构
2. 给 .row 设置 display: flex，让每行的两个矩形横向分布，用 flex:1 实现宽度平分
3. 给每个 .rectangle 添加明确的类名（如 bottom-right），替代失效的伪类选择器，逻辑更清晰
4. 调整图片宽高为固定小尺寸，配合绝对定位固定到对应角落，避免占满容器

完成后你可以直接在 .rectangle 标签内添加文本内容，不会影响图片的位置。

内容的提问来源于stack exchange，提问作者NordicDev