html - 仅添加边框右上角半径，没有其他边或背景

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/