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

Question

我正在尝试使用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>