Как создать небольшой цветной блок с помощью html и css?

У меня есть изображение на html файле/сайте, и я хочу добавить список доступных цветов для этого изображения. Я хочу создать очень маленькие коробки или точки, небольшую коробку для каждого цвета.

Как я могу это сделать?

Спасибо!

Ответы

Ответ 1

Вы можете создать их легко, используя плавающую способность CSS, например. Я создал небольшой пример в Jsfiddle здесь, все связанные css и html также предоставляются там.

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.blue {
  background: #13b4ff;
}

.purple {
  background: #ab3fdd;
}

.wine {
  background: #ae163e;
}
<div class="foo blue"></div>
<div class="foo purple"></div>
<div class="foo wine"></div>