如何用Tailwind CSS在父Div右下角创建不溢出的三角形？

解决方法 #

你当前的问题是用来生成三角形的旋转正方形超出了父容器范围，且父容器未开启溢出隐藏，导致多余部分显示。可以通过两种方式解决：

方式一：修复现有旋转实现

给黄色背景的父容器添加overflow-hidden，同时调整旋转正方形的尺寸和旋转原点，让多余部分被父容器裁剪：

修改后的三角形部分代码：

<div class="relative">
  <!-- 添加overflow-hidden裁剪超出内容 -->
  <div class="w-full h-full bg-yellow-400 relative md:ml-60 md:mt-24 overflow-hidden">
    <div class="absolute bottom-0 right-0">
      <!-- 缩小尺寸+设置旋转原点为右下角，避免过度超出 -->
      <div class="w-48 h-48 bg-yellow-400 transform rotate-45 origin-bottom-right"></div>
    </div>
  </div>
</div>

• overflow-hidden：让父容器自动裁剪掉超出自身边界的内容
• origin-bottom-right：将旋转原点固定在右下角，确保旋转后的正方形刚好贴合父容器角落
• 缩小w-48 h-48的尺寸，避免元素过度超出父容器范围

方式二：用Border实现轻量三角形（推荐）

这种方法不需要大尺寸旋转div，通过单边实色border+其余三边透明border直接生成三角形，从根源避免溢出问题：

替换三角形部分的代码：

<div class="relative">
  <div class="w-full h-full bg-yellow-400 relative md:ml-60 md:mt-24">
    <!-- 右下角三角形 -->
    <div class="absolute bottom-0 right-0">
      <!-- 调整border宽度控制三角形大小 -->
      <div class="w-0 h-0 border-b-[24rem] border-r-[24rem] border-b-yellow-400 border-r-transparent"></div>
    </div>
  </div>
</div>

• 利用border的特性：当元素宽高为0时，border会形成梯形，单边实色+邻边透明就会变成三角形
• 修改border-b-[24rem]和border-r-[24rem]的数值可以调整三角形的大小

完整修改后的右侧容器代码

替换三角形部分后，你的右侧容器代码示例：

<div className="w-full md:w-3/5 mt-4 md:mt-0 md:mr-10 md:ml-[-50px] md:mt-[-40px] relative">
  <div id="randomfood" className="overflow-hidden">
    <div className="flex items-center justify-center">
      <div className="w-[350px] flex bg-[#ffffff] items-center md:mt-28 rounded-2xl">
        <img
          src={imageUrls[0]}
          alt="Main Image"
          className="md:w-80 md:h-50 object-cover md:ml-4 md:mt-4 md:mb-4 rounded-2xl"
        />
      </div>
    </div>
  </div>
  <!-- 这里使用方式一的修复代码示例 -->
  <div class="relative">
    <div class="w-full h-full bg-yellow-400 relative md:ml-60 md:mt-24 overflow-hidden">
      <div class="absolute bottom-0 right-0">
        <div class="w-48 h-48 bg-yellow-400 transform rotate-45 origin-bottom-right"></div>
      </div>
    </div>
  </div>
</div>

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