Как нарисовать фигуру в CSS?

202
22 апреля 2018, 19:58

Пытаюсь использовать before (присовокупить кружок к прямоугольнику), но что-то не получается. Фигура - горизонтально расположенная спичка: слева - кружок 9х9, справа - прямоугольник 128х2.

Answer 1

Как видите, ничего сложного:

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.match { 
  position: relative; 
  width: 128px; 
  height: 2px; 
  background-color: brown; 
} 
 
.match::before { 
  content: ""; 
  position: absolute; 
  top: -3px; 
  left: -1px; 
  width: 9px; 
  height: 9px; 
  border-radius: 50%; 
  background-color: crimson; 
}
<div class="match"></div>

READ ALSO
Кнопка и слайд вниз
HTML

Кнопка и слайд вниз

Подскажите пожалуйста, как лучше реализовать линии на кнопке и линии вниз,заранее благодарен

 259
Зафиксировать блок по центру в тот момент когда он по центру
HTML

Зафиксировать блок по центру в тот момент когда он по центру

Есть 3 блока, 2 из них должны быть фиксированы, но фиксированы они должны быть в тот момент, когда находятся по середине экрана (более подробно...

 237
Прокрутка owl carousel до нужного элемента
HTML

Прокрутка owl carousel до нужного элемента

Есть календарь http://joxiru/E2pq88yCBWX6nA даты сделал через слайдер owl carousel, при открытии календаря необходимо чтоб каруселька прокручивалась к нужному...

 208
Проблема с выпадающим меню Bootstrap
HTML

Проблема с выпадающим меню Bootstrap

Добрый деньПри создании сайта возникла проблема, как я полагаю с js bootstrap

 205