Css div侧面的条形图，仅限firefox

我在一个div的左右两侧意外地看到了一个条，而且只在Firefox上看到

创建横幅的代码是：

.ribbon {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 25px solid transparent;
    border-bottom: 25px solid #757575;
    position: absolute;
    top: 20px;
    left: -46px;
    padding: 0 10px;
    width: 110px;
    color: white;
    font-family: sans-serif;
    size: 11px;
}
.ribbon .txt {
    position: absolute;
    bottom: -18px;
    left: 0px;
    text-align: center;
    width: 100%;
}

文本位于一个div中，该div具有class

txt

，并使用class

ribbon

包装在div中。为什么这只在Firefox中可见

---

我使用了这个

这里有另一种方法可以避免这个问题：

.box{
宽度：300px；
高度：150像素；
背景色：#A0；
位置：相对位置；
}
.丝带{
变换：旋转（-45度）平移（50%，-100%）；
变换原点：右下角；
背景：#7575；
位置：绝对位置；
底部：0；
填充：10px；
右：0；
宽度：120px；
文本对齐：居中；
颜色：白色；
字体系列：无衬线；
z指数：0；
}
.ribbon:之前，
.ribbon:之后{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：50%；
变换：skewX（45度）；
变换原点：左下角；
背景：继承；
z指数：-1；
}
.ribbon:之后{
右：0；
左：50%；
变换：skewX（-45度）；
变换原点：右下角；
}

示例文本

它周围似乎没有条带，我假设这是因为没有额外的div。如果我想在左上角有条带，我是否只更改变换原点？另外，如何使末端的角度变化位于左上角？我将此标记为已接受，因为它是正确的。@Fireynis这不是因为div，而是因为我使伪元素溢出到主元素后面（您可以在主元素上添加透明背景以注意这一点）。。。要改变角度，你要考虑SigWx，所以你的-45 DEG的整数-45 DEG，也改变原点，使它顶部而不是底部（你保持左/右为每个伪元素）