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>

无法在具有border-top-left-radius和border-width

2 个答案: