CSS 3 Corner Ribbon 圆 Angular 问题

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

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

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