仅在没有其他边或背景的情况下添加边框右上角半径

Question

我正在尝试实现如图所示的右上角三角形，但是当我应用边框半径时，为什么它会向所有边应用边框，因为我只指定了一侧半径。尽管我应用 border-top-right-radius: 5px; 而不是 border-radius: 0px 5px 0px 0px;，但我得到了相同的结果。有帮助吗？

HTML:

<div class="pricing-head">
  <h3>Rainmarker</h3>
  <span>For up to 10 users</span>
  <div class="ribon"></div>
</div>

CSS:

.pricing-head {
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
}
.pricing-head .ribon {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
}
.pricing-head .ribon:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-bottom: 70px solid transparent;
    border-left: 70px solid transparent;
    border-right: 70px solid #ffad6a;
    border-radius: 0 5px 0 0;
}

Answer 1

对于圆形右上边框，执行：

-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;

发电机：http://border-radius.com/

要获得右上角的三角形，请执行以下操作：

width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #009999 transparent transparent;

生成器：http://triangle.designyourcode.io/

要同时获得右上角三角形和右上角圆角边框半径，请使用 border-radius 和 overflow:hidden 的容器到角。

.container {
  position: relative;
  width: 300px;
  height: 100px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  border: 1px solid gray;
}

.corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: transparent #009999 transparent transparent;
}

.content {
  font-family: "Verdana";
  font-size: 12pt;
  text-align: center;
  height: 100px;
  line-height: 100px;
}

<div class="container">
  <div class="corner"></div>
  <div class="content">
    Rainmarker
  </div>
</div>

输出

Answer 2

这是一支笔，显示你想要的东西：http://codepen.io/anon/pen/VeEKLP

您需要：

border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #007bff transparent transparent;

这是制作 css 三角形的好资源：http://apps.eky.hk/css-triangle-generator/

仅在没有其他边或背景的情况下添加边框右上角半径

add border top right radius only without other sides or background

html

css

border-box