Как сделать поле со скидкой на товаре

Если перед вами стоит задача вывести в процентах размер скидки, не стоит расстраиваться, все очень просто.

Один из вариантов которые мы рассмотрим выглядит следующим образом:

На этой красной ленте мы видим размер скидки в процентах. Перед тем как приступить к визуальной части, давайте рассмотрим как нам получить это значение.

Как посчитать сколько процентов составляет скидка

Допустим, у нас есть товар который стоил 50 рублей, а теперь он стоит 35 рублей. Посмотрите внимательно на эту формулу, пример на PHP:

<?
$myNewPrice = 35;
$myOldPrice = 50;

$myPercent = round(100 - ($myNewPrice / $myOldPrice) * 100);
?>

А теперь подробней что происходит. Делим нашу новую цену на старую и умножаем на 100 – получаем сколько процентов новая цена составляет от старой. Вычитаем это значение из 100 (процентов) и вот он наш процент – 30%. Проверим всё ли так (50 / 100) * 30 = 15 рублей. С тем как это посчитать разобрались, идем дальше.

Для визуальной части нам понадобится эта картинка

Выводим наш HTML

<div class="price-block">-<?=$myPercent?>%</div>

Картинка не случайно расположена горизонтально – мы будем ее поворачивать с помощью свойства CSS rotate (мы поворачиваем весь блок, не только картинку но и содержимое – наш процент):

.price-block {
	background: url(images/b_price.png) no-repeat 0 0;
	width: 95px;
	height: 30px;
	position: absolute;
	right: -27px;
	top: 4px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

45deg – это 45 градусов. На всякий случай прописываем для всех браузеров и молимся, чтобы код сработал в IE 🙂