html - 无法在具有 border-top-left-radius 和 border-width 的三 Angular 形对象中创建圆 Angular 左上角

Question

如何在使用 border-width 时添加边框半径？我想添加 border-top-left-radius 为 15px。

我有这段代码可以创建一个三 Angular 形对象，它看起来不错，但我希望该对象在左上角具有边框半径。但是，如果我使用 border-top-left-radius: 15px; 对象不是三 Angular 形而是正方形。

目前我使用的是 Bootstrap 3.3.7。

.exclusive-price{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 160px 160px 0 0;
    border-color: #C00000 transparent transparent transparent;
    /* if use this the object will be a square */
    /*
    border-top-left-radius: 15px;
    */

}
.exclusive-price>label{
    position: relative;
    top: -110px;
    left: -5px;
    text-decoration: none;
    word-wrap: normal;
    min-width: 140px;
    font-size: 20px;
    color: #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="exclusive-price"><label>Most Effective</label></div>

Answer 1

包装一个容器并在 CSS 上进行一些更改以实现此目的:

.corner-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  display: inline-block;
  border-top-left-radius: 15px;
  overflow: hidden;
}
.exclusive-price {
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 160px 160px 0 0;
  border-color: #C00000 transparent transparent transparent;
  /* if use this the object will be a square */
  /*
  border-top-left-radius: 15px;
  */
}
.exclusive-price>label{
  position: relative;
  top: -110px;
  left: -5px;
  text-decoration: none;
  word-wrap: normal;
  min-width: 140px;
  font-size: 20px;
  color: #fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="corner-label">
  <div class="exclusive-price"><label>Most Effective</label></div>
</div>