HTML и или CSS для автоматического создания простых фильтров / изображений для поиска - PullRequest
Новая
       0

HTML и или CSS для автоматического создания простых фильтров / изображений для поиска

0 голосов
/ 18 февраля 2020

У меня есть требование отображать список поисковых фильтров на странице HTML для многих перестановок конфигурации продукта.

. Существует несколько опций лотка:

  • 5 слотов для лотков
  • 6 слотов для лотков
  • 7 слотов для лотков
  • 8 слотов для лотков
  • 9 слотов для лотков
  • 10 слотов лотка
  • 11 слотов лотка

и для каждого варианта слота лотка доступно несколько конфигураций ... корзина занимает 2 слота лотка, и лоток занимает один слот для лотка, поэтому для варианта с 6 лотками возможны следующие варианты:

  • 2 корзины, 2 лотка
  • 1 корзина, 4 лотка
  • 0 корзины, 6 лотков
  • 3 корзины, 0 лотков

Мне нужны изображения для каждой комбинации, чтобы пользователь мог легче понять фильтры поиска ...

Например, для опции 11 лотков изображение поискового фильтра будет выглядеть примерно так:

enter image description here

и для одного из комбинации из 11 слотов для лотков, вариант с 9 лотками и 1 корзиной будет выглядеть следующим образом:

9 trays 1 basket

Могу ли я использовать css или некоторые динамические c Создатель изображения / значка для автоматического создания функции отображения изображения / css для динамического создания этих перестановок? В противном случае сохранение и создание этих изображений может быть утомительным

1 Ответ

1 голос
/ 18 февраля 2020

Я пошел с этим на данный момент. Любые комментарии приветствуются о том, как улучшить css / html

<html>
	<head>
		<style>
     .trapezoid {
     border-bottom: 1.2vw solid grey;
     border-left: 0.8vw solid transparent;
     border-right: 0.8vw solid transparent;
     height: 0;
     transform: rotate(180deg);
     margin: 0.5vw;
     }
     .rectangle {
     height: 0.4vw;
     background-color: grey;
     margin:0.2vw;
     }
     .option-wrapper {
     float: left;
     margin: 0.5vw;
     width: 5.0vw;
     border: 0.1vw solid grey;
     }
  </style>
	</head>
	<body>
		<span class="option-wrapper">
			<a href="">
				<div class="trapezoid"></div>
				<div class="trapezoid"></div>
				<div class="trapezoid"></div>
			</a>
		</span>
		<span class="option-wrapper">
			<a href="">
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="trapezoid"></div>
				<div class="trapezoid"></div>
			</a>
		</span>
		<span class="option-wrapper">
			<a href="">
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="trapezoid"></div>
			</a>
		</span>
		<span class="option-wrapper">
			<a href="">
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="rectangle"></div>
				<div class="rectangle"></div>
			</a>
		</span>
	</body>
	<html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...