CSS3右上角角丝带圆角设置无效问题求助

嘿，我懂你遇到的问题了——用border拼接出来的右上角角丝带，怎么加border-radius都不生效，对吧？这其实是因为你用的这种实现方式，视觉上的角丝带本质是元素的border边框区域，而border-radius是作用在元素本身的盒模型边框上，没法直接让拼接出来的border边角产生圆角效果。

下面给你两个实用的解决方案，你可以根据需求选：

方案1：用伪元素+渐变画带圆角的角丝带（推荐） #

这种方式不用依赖border，灵活性更高，还能轻松加圆角：

.corner-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 150px; /* 按需调整宽度 */
  height: 150px;
  overflow: hidden;
}

.corner-ribbon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #ED5565;
  transform: rotate(45deg);
  transform-origin: top right;
  /* 这里的圆角对应最终显示的右上角 */
  border-bottom-left-radius: 10px;
}

如果你需要在丝带上加文字，直接在.corner-ribbon里加个span，用flex布局居中就行，比border方案方便太多。

方案2：给原border方案补圆角（兼容写法） #

要是你不想改原来的border实现，也可以用伪元素做个“遮挡层”来模拟圆角：

.corner-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 100px solid #ED5565;
  border-left: 100px solid transparent;
  position: relative;
}

.corner-ribbon::after {
  content: "";
  position: absolute;
  top: -100px;
  right: 0;
  width: 10px;
  height: 10px;
  background: #fff; /* 这里要和页面背景色一致 */
  border-bottom-left-radius: 10px;
}

原理就是用一个和背景同色的小圆角矩形，把border拼出来的尖锐右上角挡住，看起来就像是圆角了。不过这个方法要注意背景色的适配，要是页面背景不是纯色可能就不太好用。

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