如何裁切页面右上角超出body范围的CSS菱形或将溢出部分设为透明

不需要手动计算菱形超出区域的具体位置，通过CSS原生溢出裁切能力即可稳定实现效果，适配现有代码的操作如下：

全局裁切方案（最简洁） #

• 给body根元素新增overflow: hidden规则，所有超出body边界的元素（包括旋转后的菱形）会被浏览器自动裁切，不会露出多余部分，也不会生成多余的滚动条：

  body {
    margin-top: 100px;
    overflow: hidden; /* 新增此行即可生效 */
  }
  

• 同步修正现有代码中的无效冗余属性：
  • 你给.diamond2重复编写了两次margin声明，后面的margin: -208px 447px会完全覆盖前值，直接删掉重复声明即可
  • 移除无意义的float: right和display: inline：菱形已设置position: absolute，浮动属性对绝对定位元素完全无效，保留只会增加代码冗余
  • 将写死的大负边距定位替换为灵活的边界定位，方便后续调整裁切比例：

    .diamond2 {
      position: absolute;
      top: -60px; /* 向上偏移菱形自身高度的一半，自然让一半菱形处于可视区外被裁切 */
      right: -60px; /* 向右偏移菱形自身宽度的一半，让菱形刚好对齐页面右上角 */
      height: 120px;
      width: 120px;
      z-index: 1;
      font-family: Helvetica;
      color: #ffffff;
      font-size: 13px;
      font-weight: 600;
    }
    

单元素裁切方案（适配需保留页面滚动的场景） #

如果页面本身需要支持纵向滚动，不想给body加全局overflow: hidden，可以单独给菱形元素加裁切规则，不会影响页面其他滚动行为：

• 直接在.diamond2或者其伪元素.diamond2::after上添加clip-path: inset(0 0 0 0)，根据想要露出的菱形比例，调整四个方向的裁切值，即可精准保留需要显示的部分，超出区域会被完全裁掉不会透出。

避坑提示 #

• 不要尝试手动把菱形超出区域设为透明：由于菱形是经过3D旋转变形的多边形，手动计算边界很容易出现毛边、位置偏移的问题，远不如原生溢出裁切的效果精准稳定
• 注意绝对定位的参考容器：如果菱形定位偏移不符合预期，检查其直接父级容器是否设置了position: relative，绝对定位元素会一直向上寻找最近的定位祖先作为参考点，容易出现定位错位
• 检查现有代码的单位问题：你给.container设置的width:1120没有加长度单位，浏览器会按无效值解析，建议补上px单位避免样式异常

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