无法在具有边框左上角半径和边框宽度的三角形对象中创建圆角左上角

Question

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

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

目前我使用的是 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>

Answer 2

根据万维网联盟 (W3C)，CSS 有一种称为盒子模型的东西。 CSS 框模型描述了为 DOM 中的元素生成的矩形框。这就是为什么如果将边框半径应用到左上角，对象会显示为矩形/正方形。

.triangle{
    border-color: #C00000 white white #C00000;
    border-top-left-radius: 15px;
    border-style: solid;
    border-width: 160px 160px 0px 0px;
    height: 0px;
    width: 0px;
}
.exclusive-price>label{
    position: absolute;
    top: 54px;
    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="triangle">  </div>
<div class="exclusive-price"><label>Most Effective</label></div>