Nice CSS for span.onsale

onsale.scss

/* ON SALE - ETIQUETA EM PE */
span.onsale {
	border-radius: 6px 6px 0 0;
	color: #FFFFFF;
	display: block;
	float: left;
	padding: 20px 10px;
	background: theme-color("vermelhoEscuroPapelaria");
	font-size: 0.9rem;
	font-weight: 600;
	position: absolute;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		display: block;
		top: 100%;
	}
	&::before {
		border-width: 20px 25px 0 0;
		border-color: theme-color("vermelhoEscuroPapelaria") transparent transparent transparent;
	}
	&::after {
		border-width: 0 25px 20px 0;
		border-color: transparent theme-color("vermelhoEscuroPapelaria") transparent transparent;
		left: calc(100% - 25px);
	}
}

/* ON SALE - ETIQUETA EM HORIZONTAL */
.span.onsale {
    border-radius: 6px 0 0 6px;
    color: #fff;
    display: block;
    float: left;
    padding: 10px 20px;
    background: #93274f;
    font-size: 20px;
    font-weight: 400;
    position: relative;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 100%;
		width: 0;
		height: 0;
		border-style: solid;
		display: block;
	}
	&::before {
		top: 0;
		border-width: 22px 15px 0 0;
		border-color: #93274f transparent transparent transparent;
	}
	&::after {
		bottom: 0;
		border-width: 0 15px 22px 0;
		border-color: transparent transparent #93274f transparent;
	}
}

/* ON SALE - BARRA DIAGONAL */
span.onsale {
	position: absolute;
	top: -8px;
	left: -38px;

	padding: 0;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	background-color: transparent;

	border-radius: initial;
	border-bottom: 60px solid theme-color("azulVolvo");
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;

	transform: rotate(-45deg);

	&::before {
		border-left: none;
		left: auto;
		transform: rotate(45deg);
	}

	i.sale-text,
	i.from-to,
	i.porcentagem {
		position: absolute;
		top: 25px;
		font-size: 22px;
		width: 140px;
		left: -36px;
	}

	i.sale-text {
		font-size: 15px;
		text-transform: capitalize;
		top: 28px;
		left: -25px;
	}

	i.from-to {
		font-size: 15px;
		text-transform: capitalize;
		top: 10px;
		left: -15px;
	}
}