CSS

Question

我正在尝试使用 CSS 创建一个 "price tag" 形状，较锐利的边缘朝右。当标签的边缘朝左时，添加文本（无论长短）都没有问题，因为三角形是静态的，只有矩形在拉伸。

我需要创建相同的东西，但使用 "elastic" 直角三角形，以保持只使用一个 class 而不是为每个文本长度使用专用的 class。

对于这两个示例，请参阅此 fiddle。

.pricetag {
  position: relative;
  margin: 0 5px 0 10px;
  displaY: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag:after {} .pricetag:before {
  position: absolute;
  content: "";
  left: -15px;
  width: 1px;
  height: 0px;
  border-right: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}
/**********/

.pricetag-right {
  position: relative;
  margin: 0 5px 0 10px;
  displaY: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag-right:after {} .pricetag-right:before {
  position: absolute;
  content: "";
  left: 382px;
  width: 1px;
  height: 0px;
  border-left: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}

<span class="pricetag">no problem with long text</span>
<br>
<br/>
<span class="pricetag-right">need to create a new class for each length</span>

Answer 1

你只需要根据标签的右侧用右边属性而不是左边属性来定位箭头：

.pricetag {
  position: relative;
  margin: 0 5px 0 10px;
  display: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag:before {
  position: absolute;
  content: "";
  left: -15px;
  width: 1px;
  height: 0px;
  border-right: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}
/**********/

.pricetag-right {
  position: relative;
  margin: 0 5px 0 10px;
  display: inline-block;
  height: 46px;
  padding: 0 35px 0 15px;
  background: #E8EDF0;
  font-size: 20px;
  line-height: 41px;
}
.pricetag-right:before {
  position: absolute;
  content: "";
  right: -15px;
  width: 1px;
  height: 0px;
  border-left: 14px solid #E8EDF0;
  border-top: 23px solid transparent;
  border-bottom: 23px solid transparent;
}

<span class="pricetag">no problem with long or short text (length auto adjusts)</span>
<br>
<br/>
<span class="pricetag-right">need to create a new class for each length</span>
<br/>
<br/>
<span class="pricetag-right">need to create a nqsdqsdqsdqsdqsdqsdew class for each length</span>

CSS - 创建一个朝右的动态 "tag" 形状

CSS - create a dynamic "tag" shape facing to the right

html

css-shapes