CSS实现div右上角尖角切角 解决设置后显示圆角问题

border-top-right-radius属性的作用是为元素右上角添加圆弧圆角效果，无法实现直线裁切的直角切角需求，这是当前代码始终得到圆角的核心原因。

优先推荐使用clip-path属性实现，代码简洁、效果精准，无多余兼容hack：

• 实现逻辑：通过多边形路径裁切元素，直接将右上角的三角形区域裁掉，剩下的边缘为笔直斜线，刚好形成需要的尖角切角效果。
• 修改后的核心CSS代码（以裁切65px尺寸的切角为例）：

.overlay {
  z-index: 9;
  background: red;
  /* 删除原代码中的border-top-right-radius属性，替换为以下裁切规则 */
  clip-path: polygon(
    0 0, /* 左上角起点 */
    calc(100% - 65px) 0, /* 顶边切角起点，距离右边缘65px */
    100% 65px, /* 右边切角终点，距离顶边65px */
    100% 100%, /* 右下角 */
    0 100% /* 左下角 */
  );
}

• 调整切角大小只需要修改代码里的65px数值即可，数值越大，切角的斜边越长。

低版本浏览器兼容方案 #

如果需要兼容IE等不支持clip-path的老旧浏览器，可以用线性渐变模拟切角效果，代码如下：

.overlay {
  z-index: 9;
  /* 渐变从右上角透明三角过渡到红色填充，模拟切角形态 */
  background: linear-gradient(-135deg, transparent 65px, red 65px);
}

该方案视觉效果和clip-path完全一致，缺点是如果元素需要展示背景图、复杂边框时适配成本更高，常规场景优先选择clip-path方案即可。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 150px;
      height: 150px;
      position: relative;
      margin: 30px;
    }
    .box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.7;
      background: #0057e3;
    }
    .overlay {
      z-index: 9;
      background: red;
      clip-path: polygon(0 0, calc(100% - 65px) 0, 100% 65px, 100% 100%, 0 100%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box overlay"></div>
  </div>
</body>
</html>

注意：不要在切角元素上混用border-radius属性，圆弧规则会破坏直线切角的边缘形态。

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