Html CSS三角形边框

我正在尝试用CSS创建一个标签形状。使用下面的代码，我可以在箭头位于左侧的情况下正确显示标记，如何将箭头移到div的右侧而不是左侧

HTML:

演示：

---

只需更改一些CSS样式：

.tags a:after{
    content:"";
    float:left;
    position:absolute;
    top:0;
    right:-12px; //Change here
    width:0;
    height:0;
    border-color:transparent transparent transparent #0089e0; //Change here
    border-style:solid;
    border-width:12px 0 12px 12px; //Change here
}

这是一种自我解释：它现在是从右侧定位的，左右边界属性被交换。当然除了边框样式

仅供参考：如果元素处于绝对位置，则浮动该元素不会对其产生任何影响

---

只需更改一些CSS样式：

.tags a:after{
    content:"";
    float:left;
    position:absolute;
    top:0;
    right:-12px; //Change here
    width:0;
    height:0;
    border-color:transparent transparent transparent #0089e0; //Change here
    border-style:solid;
    border-width:12px 0 12px 12px; //Change here
}

这是一种自我解释：它现在是从右侧定位的，左右边界属性被交换。当然除了边框样式

仅供参考：如果元素处于绝对位置，则浮动该元素不会对其产生任何影响

---

将：before放置在右侧，并将边框设置为除左侧而非右侧之外的所有边都透明。

将：before放置在右侧，并将边框设置为除左侧而非右侧之外的所有边都透明。

本质上，您需要将left的实例更改为right，无论它是：：before还是：：after，以及浮动方向都是无关紧要的，因为伪元素是绝对定位的。执行此操作时，请记住，边框颜色和边框样式实际上是按顺序引用顶部、右侧、底部和左侧

因此，您要更改的属性是：

left:-12px;
border-color:transparent #0089e0 transparent transparent;
border-width:12px 12px 12px 0;

到

本质上，您需要将left的实例更改为right，无论它是：：before还是：：after，以及浮动方向都是无关紧要的，因为伪元素是绝对定位的。执行此操作时，请记住，边框颜色和边框样式实际上是按顺序引用顶部、右侧、底部和左侧

因此，您要更改的属性是：

left:-12px;
border-color:transparent #0089e0 transparent transparent;
border-width:12px 12px 12px 0;

到

right:-12px;
border-color:transparent transparent transparent #0089e0;
border-width:12px 0 12px 12px;