代码之家 › 专栏 › 技术社区 › Roy Ryando

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

twitter-bootstrap-3 css html

Roy Ryando · 技术社区 · 7 年前

使用边框宽度时如何添加边框半径?我想补充一下 边框左上半径 属于 15像素 .

我有这个代码来创建一个三角形对象,它看起来不错,但我想对象有边界半径在左上角。但是,如果我使用 border-top-left-radius: 15px; 这个物体不是三角形而是正方形。

目前我使用bootstrap3.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>

2 回复 | 直到 7 年前

Chaska 7 年前

.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>

Dharmesh Vekariya 7 年前

根据万维网联盟(W3C)的说法,CSS有一种称为box模型的东西。cssboxmodel描述为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>