Как создать квадрат в css

Адаптивный квадрат на CSS

Герман Волков

Как вычисляется padding , если он указан в процентах? Очень просто:

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

Даже внутренний отступ сверху и снизу вычисляется именно исходя из ширины родителя. Поэтому реализовать адаптивный квадрат на CSS очень просто.

  1. создаем блок, который хотим сделать квадратным
  2. помещаем внутрь элемент ( :after )
  3. делаем элемент блочным
  4. задаем элементу padding-top: 100%

Псевдоэлемент используется, чтобы не создавать лишний html элемент.

А как поместить контент?

Все сломается, если поместить в блок .square контент, например, текст. Наш квадрат превратится в прямоугольник. Эта проблема тоже решается очень просто.

Снова по порядку:

  1. Задаем position: relative; для нашего квадратного блока
  2. Весь контент оборачиваем в html-блок .content
  3. Позиционируем .content абсолютно
  4. Растягиваем .content на всю ширину и высоту блока .square

Так как .content спозиционирован абсолютно — контент, находящийся внутри не будет растягивать квадрат.

Как создать круг или квадрат с помощью только CSS — с полым центром?

Я хотел бы применить этот круг или квадрат над чем-то другим (например, изображение или что-то еще), а средняя часть должна быть выдолблена, чтобы вы могли видеть изображение под квадратом или кругом.

Я бы предпочел, чтобы он был в основном CSS + HTML.

Вы можете использовать специальные символы для создания множества фигур. Примеры: http://jsfiddle.net/martlark/jWh2N/2/

enter image description here

Здесь можно найти еще много: Специальные символы HTML

Я не знаю простого css (стандартного стандарта 2.1) — единственное решение для кругов, но для квадратов вы можете легко:

то используйте следующий код html:

Если вы хотите, чтобы ваш div сохранял свою круговую форму, даже если вы изменили его ширину/высоту (например, с помощью js), установите радиус на 50%. Пример: CSS:

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

Насколько мне известно, не существует совместимого с кросс-браузером способа создания круга только с CSS и HTML.

Для квадрата, я думаю, вы могли бы сделать div с границей и z-индексом выше, чем вы его положили. Я не понимаю, зачем вам это нужно, когда вы можете просто поместить границу на изображение или "что-то".

Если кто-то еще знает, как сделать круг, который является кросс-браузером, совместимым только с CSS и HTML, я хотел бы услышать об этом!

@border-radiusCaspar Kleijne не работает в IE8 или ниже, не уверен около 9.

Вскоре после нахождения этих вопросов я нашел эти примеры в CSS-трюках: http://css-tricks.com/examples/ShapesOfCSS/

Скопировано, поэтому вам не нужно нажимать

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

Квадратные элементы в css grid

Необходимо сделать элементы квадратными на всех разрешениях без использования JS. Возможно ли это?

Оказывается, всё-таки можно. Сделал по подобию из ответа на enSO:

Также можно поддерживать другие соотношения сторон с помощью процентного padding-bottom .

Ещё варианты

Также можно использовать vmin (или vmax ) для строк и стоблцов. Это подойдёт если вы ведёте речь про блоки, которые занимают большую часть экрана.

Также возможно использовать vw и vh если нужна ширина в процентах от ширины или высоты окна браузера.

Ещё можно использовать фиксированные ( px , cm , mm , in ) или зависящие от размера шрифта ( em , rem , ex , pt , pc ) единицы для ширины и высоты колонок.

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

Ваш адрес email не будет опубликован.