Что не так с :before?

Question

[vikholodov]

Кусок ленточки не хочет уходить на задний план, z-index вроде прописал, может псевдоклассы как-то особенно на это реагирует?
<span class="discount-badge">15%</span>

.discount-badge {
	background-color: #099319;
	color: white;
	font-weight: 600;
	font-size: 16px;
	width: 50px;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	opacity: 1;
}
.discount-badge:before {
    content: ' ';
    width: 17px;
    background-color: #086f14;
    position: absolute;
    display: block;
    left: 24px;
    top: 2px;
    height: 33px;
    transform: rotate(-46deg);
    z-index: -1;
}

Comments

[Александр]

Треугольник можно сделать с помощью border без трансформации.

Answer 1

[one_day]

если нужен эффект загнутой ленточки:

.discount-badge:after {
    content: '';
    border-style: solid;
    border-color: transparent;
    bottom: -10px;
    position: absolute;
    border-width: 0 0 10px 10px;
    border-left-color: #086f14;
    right: 0;
}

Comments

[vikholodov]

Спасибо!

Answer 2

[Сергей]

У .discount-badge уберите z-index.