Question

所以，我正试图制作右上角的彩带。我正在成功地做到这一点，但我遇到的问题是我无法找到一种方法让右上角有一个轻微的边界半径，比如10px。我尝试了border-radius：0px 0px 0px 10px（更改所有值）以及border-top-right-radius：10px并且没有一个工作。任何解决方案将不胜感激。

.corner-ribbon {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 100px solid #ED5565;
  border-left: 100px solid transparent;
}

.corner-ribbon .test-text {
  transform: rotate(45deg);
  position: absolute;
  right: 10px;
  bottom: 60px;
  color: white;
  text-transform: uppercase;
}

<div class="corner-ribbon">
  <span class="test-text">Some text</span>
</div>

Answer 1

根据给定的代码，您可以添加包装并使其与功能区大小相同，然后应用包含溢出隐藏的边框半径。由于您使用边框制作形状，因此在现有元素上应用边框半径将无效。

＆＃13;

.corner-ribbon {
  border-top: 100px solid #ED5565;
  border-left: 100px solid transparent;
}

.corner-ribbon .test-text {
  transform: rotate(45deg);
  position: absolute;
  right: 10px;
  bottom: 60px;
  color: white;
  text-transform: uppercase;
}

.wrapper {
  border-radius: 0 15px 0 0;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100px;
  height: 100px;
  overflow: hidden;
}

＆＃13;

<div class="wrapper">
  <div class="corner-ribbon">
    <span class="test-text">Some text</span>
  </div>
</div>

＆＃13;

CSS 3 Corner Ribbon圆角问题

1 个答案: