CSS 3 Corner Ribbon 圆角问题

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

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

.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;
}

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