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

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

  • автор:

Основные Фигуры

Существует несколько основных фигур, используемых в большинстве рисунков SVG. Назначение этих фигур вполне очевидно из их имён. Мы привели здесь некоторые атрибуты, определяющие положение и размер, но спецификация элемента, вероятно, содержит более точное и полное описание, вместе с другими свойствами, не описанными здесь. Однако, так как они используются в большинстве документов SVG, важно иметь некоторое представление о них.

Основные формы

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> svg> 

Примечание: Атрибуты stroke , stroke-width и fill описываются в руководстве далее.

Прямоугольники

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

rect x="10" y="10" width="30" height="30"/> rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> 

Положение x верхнего левого угла прямоугольника.

Положение y верхнего левого угла прямоугольника.

Радиус x углов прямоугольника

Радиус y углов прямоугольника

Окружность

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

circle cx="25" cy="75" r="20"/> 

Положение x центра окружности.

Положение y центра окружности.

Эллипс

Ellipse — это наиболее общая форма элемента окружность, в котором можно масштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

ellipse cx="75" cy="75" rx="20" ry="5"/> 

Радиус x эллипса.

Радиус y эллипса.

Положение x центра эллипса.

Положение y центра эллипса.

Линия

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечную точки линии.

line x1="10" x2="50" y1="110" y2="150"/> 

Положение x точки 1.

Положение y точки 1.

Положение x точки 2.

Положение y точки 2.

Ломаная линия

Элемент polyline воспроизводит группу соединённых прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:

polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> 

Список точек, каждая разделённая пробелом, запятой, EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: «0 0, 1 1, 2 2».

Многоугольник

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента в случаях, когда необходимо большая гибкость.

polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> 

Список точек, каждая разделённая пробелом, запятой, EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: «0 0, 1 1, 2 2». Полигон замыкается финальной прямой линией от (2,2) до (0,0).

Путь

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

path d="M 20 230 Q 40 205, 50 230 T 90230"/> 

Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.

  • « Предыдущая статья
  • Следующая статья »

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 5 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

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

введите сюда описание изображения

Нужно создать такой прямоугольник как на рисунке — все стороны слегка выгнуты наружу, буквально на несколько пикселей, углы скруглены. Пробовал и с помощью border-radius, и с помощью clip-path — не вышло. Эта форма будет использоваться как базовая кнопка с текстом внутри. Нужна помощь.

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака
задан 7 окт 2022 в 20:33
Максим Бондаренко Максим Бондаренко
33 4 4 бронзовых знака
Почему не на svg?
7 окт 2022 в 20:35
забыл указать, что этот прямоугольник будет базовой кнопкой с текстом внутри
8 окт 2022 в 7:02

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Рассмотрите, как писал в комментарии @andreymal, вариант решения SVG.
Это позволит точно повторить размеры и соотношения сторон, как в задании.
К тому же решение будет адаптивным и выглядеть одинаково на всех гаджетах.

#1. Загружаете растровое изображение в векторный редактор — Inkscape

#2. По контуру наносите узловые точки и с помощью рычагов управления этих точек добиваетесь полного совпадения с контуром исходной фигуры.

введите сюда описание изображения

#3. Сохраняете файл в формате SVG

#4. Добавляете строку для вывода текста внутри SVG (кнопки)

 START 

#5. svg оборачиваете в родительский контейнер div > и теперь можно размещать кнопку в любом месте и менять её размеры, изменяя width и height родительского контейнера.

width:50vw; height:50vh; 
 .button 
START
width:10vw; height:10vh; 

Как добавить белый прямоугольник на сайт через код?

Author24 — интернет-сервис помощи студентам

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
html> head> title>Ответы на ОГЭ,ЕГЭ,ВПР/title> link rel="shortcut icon" href="favicon.png" type="image/png" /> style> body < background: url(back.jpg) no-repeat; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; >/style> /head> body style="background-attachment:fixed" topmargin="0"> /body> /html>

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Сайт на Ucoze, не могу понять как добавить код
Всем привет, в веб программирование я полный ноль) Прошу помочь.

Как добавить код в конце html через id с js?
как добавить код в конец html через id с помощью js

Как в ListView добавить текст с картинкой, через код?
Вот имеется такой вот ListView: <ListView x:Name="lv001" Margin="10".

Как через код добавить нужную OCX на форму?
Люди помогите — как через код добавить нучжную OCX на формую. Заранее спасибо

Регистрация: 06.03.2016
Сообщений: 64

Лучший ответ

Сообщение было отмечено Dedus21 как решение

Решение

div class="block">Ваш текст/div>
1 2 3 4 5 6
.block { width:100px; height:100px; background-color: #fff; margin: 0 auto; }

Фишинг сайт с ответами?))
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Нарисовать белый прямоугольник
Здравствуйте! Подскажите пожалуйста как в MFC AppWizard (exe) нарисовать прямоугольник, заполненный.

Белый прямоугольник на странице
Нужна помощь студенту! Помогите справится с этой белой сферой по среди страницы. <!DOCTYPE.

Белый прямоугольник вокруг TextOut
#include<conio.h> #include<Windows.h> LRESULT CALLBACK WindowProcedure(HWND, UINT, WPARAM.

Белый прямоугольник на рабочем столе
При загрузке виндовс иногда появляется прямоугольник, в меню переключения окон у него нет названия.

Или воспользуйтесь поиском по форуму:

Как создать ромбовидный прямоугольник с помощью CSS?

60e181d7b4cd43d98c0004238c011b2d.png

Подскажите как с помощью CSS создать вот такую фигуру. Заранее спасибо!

  • Вопрос задан более трёх лет назад
  • 689 просмотров

2 комментария

Оценить 2 комментария

DENDIBAEV

на чистом css?
kranopodem @kranopodem Автор вопроса
Арман Дендибаев: Не обязательно
Решения вопроса 2

webirus

Тыжверстальщик! Наверстай мне упущенное.
Заставило задуматься.
https://jsfiddle.net/webirus/otfx1am0/
Ответ написан более трёх лет назад
Нравится 3 1 комментарий

Ivanq

Если задача не чисто спортивная, а из реальной жизни, то НЕ нужно делать это на CSS.
Нужна кар-тин-ка.

Ответ написан более трёх лет назад
Нравится 1 5 комментариев

webirus

С чего бы это?

lazalu68

Почему? С помощью CSS ведь можно было бы сделать этот блок адаптивным.

Потому что это будет костыльный, бажный, трудно модифицируемый (даже самим автором спустя месяц) код.
И ни один из приведенных вариантов не будет pixel-perfect по отношению к макету, всё это так, приближения.

Elmechador @Elmechador
Верстать вообще ничего не надо, надо картинку загружать и готово дело.

Сделать кнопку одной цельной картинкой — это самое простое, конечно. Хотя это и не очень хорошо по понятным причинам. Хочется, чтобы кнопка всё-таки тянулась.

Если ограничиться адаптивностью только по ширине (этого достаточно в абсолютном большинстве случаев) — делается это вообще элементарно при помощи одной картинки-спрайта и двух псевдоэлементов before/after. При этом в псевдоэлементы кладется тот же самый спрайт.

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

Но ключевой момент в любом случае в том, что эта хитрая рамка должна быть нарисована и вставлена в виде картинки, а не извращенских трансформаций. Трансформации — это плохой, костыльный путь. Картинка модифицируется как угодно в режиме визивига в графредаторе. Другой наклон? Другая толщина линий? Скруглить углы? Сделать ассиметрию? Градиент? Всё не вопрос, всё рисуется за пару минут. А любители трансформаций сидят и кропотливо пересчитывают пиксели-градусы-косинусы и всё равно есть баги. Я вижу два бага в ответе, помеченном как решение (прочие вообще никуда не годятся).

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

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