CSS - 创建一个面向右侧的动态“标签”形状答案

【问题标题】：CSS - create a dynamic "tag" shape facing to the rightCSS - 创建一个面向右侧的动态“标签”形状
【发布时间】：2015-04-29 21:10:43
【问题描述】：

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

我需要创建相同的东西，但使用“弹性”直角三角形，以继续只使用一个类而不是每个文本长度的专用类。

对于这两个示例，请参阅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>

【问题讨论】：

.pricetag-right:before 使用 right:-15px; 代替 left:382px。您需要设置相对于右边缘而不是左边缘的位置，因为正如您所说，文本内容的长度是动态的。

标签： html css css-shapes

【解决方案1】：

您只需要根据标签的右侧使用 right 属性而不是 left 属性来定位箭头：

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

【讨论】：