Как сделать прямоугольник в css

Как нарисовать прямоугольник в HTML или CSS?

Я пытаюсь нарисовать прямоугольник, и я нашел сайт для кода CSS ( http://css-tricks.com/примеры /ShapesOfCSS /). Как мне собрать в HTML? Другими словами, как определить #rectangle в HTML.

Facebook всегда имеет синий прямоугольник вверху каждой страницы. Каков наилучший способ достичь, как они?

Я ценю, если кто-то может мне помочь.

9 ответов

Я настоятельно рекомендую вам прочитать о селекторах CSS и основы HTML .

Используйте <div style="width:number px; height:number px; background-color:blue"></div>

Это создаст синий прямоугольник.

Рекомендую использовать svg для графических элементов. При использовании CSS для стилизации ваших элементов.

css, который вы показываете, должен быть применен к элементу блока, как div. Итак:

Я делаю следующее в своих списках на eBay:

Это создает рамку с закругленными углами. Вы можете играть с переменными.

Чтобы имитировать прямоугольник с фиксированной позицией на Facebook, попробуйте что-то вроде этого:

CSS

На странице HTML вы должны поместить свой код CSS между тегами, а в теле — div, который имеет прямоугольник id Вот код:

Как сделать на CSS прямоугольник с сохранением пропорций при изменении размера его родителя

У Andrew Welch, на днях, был небольшой CSS челлендж, в котором было нужно создать обычный div который:

  • отцентрирован по вертикали и горизонтали
  • масштабируется по размеру области просмотра с отступами по периметру
  • поддерживает произвольное соотношение сторон
  • Без JS

В твите, на который я давал ссылку выше, есть видео которое поможет вам визуализировать задание.

Mark Huot стал фантазировать, применяя пропорции непосредственно к ширине/высоте div и создавая отступы отталкиваясь от разницы этих размеров.

Идея Amelia Wattenberger была задать единицы измерения vw/vh для height/width и max-height/max-width, и отцентрировать div классическим трюком с translate:

Eric A. Meyer сделал также, только отцентрировал div с помощью flexbox.

Brian Hart использовал единицы измерения vmin для соотношения сторон и отцентрировал div с помощью flexbox:

Benoît Rouleau сделал аналогично, но использовал calc() для отступов.

Andrew очень понравился подход Jonathan Melville. Правда большая часть элементов содержит классы Tailwind, которые мне трудновато понять, так как я не привык работать с этим фреймворком и читать его код.

Andrew сказал, что в конечном итоге он выбрал вариант с использованием vmin — хотя я вижу, что в этом варианте используется calc() для вычитания единиц vmin друг из друга, а это в действительности не нужно, если вы конечно не хотите видеть излишние вычисления в коде.

SVG прямоугольник

В SVG есть несколько предопределенных элементов, позволяющих разработчику рисовать различные фигуры:

  • Прямоугольник <rect>
  • Круг <circle>
  • Эллипс <ellipse>
  • Прямая линия <line>
  • Ломаная линия <polyline>
  • Многоугольник <polygon>
  • Контур <path>

В следующих главах будет рассмотрен каждый элемент, и начнем мы с прямоугольника.

SVG прямоугольник — <rect>

Пример №1

Для создания прямоугольника и различных его вариаций используется элемент <rect>:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *