@vikholodov

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

59fc30911417c113990641.png
Кусок ленточки не хочет уходить на задний план, 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;
}
  • Вопрос задан
  • 479 просмотров
Решения вопроса 1
one_day
@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;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
UDAV99
@UDAV99
web программист, верстальщик
У .discount-badge уберите z-index.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы