- Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius
- Свойство border
- 1. Треугольник (стрелка)
- 2. Квадрат
- Свойство border-radius
- 1. Лимон
- 2. Блоки с речью
- 3. Радиация CSS
- Ещё по теме CSS
- Миша
- Треугольники через CSS
- Использование border
- Геометрические фигуры на CSS
- Квадрат
- Прямоугольник
- Круг
- Овал
- Треугольник вверх
- Треугольник вниз
- Треугольник налево
- Треугольник направо
- Треугольник в левом верхнем углу
- Треугольник в правом верхнем углу
- Треугольник в левом нижнем углу
- Треугольник в правом нижнем углу
- Параллелограмм
- Трапеция
- Звезда (6-конечная)
- Звезда (5-конечная)
- Пятиугольник
- Шестиугольник
- Восьмиугольник
- Сердечко
- Знак бесконечности
- Геометрические фигуры на CSS
- Окружность
Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius
В моей статье про создание кнопки «наверх» меня часто просят, чтобы я дал ссылку на картинку со стрелкой.
А я либо предлагаю использовать HTML-сущность ▲ (в итоге получается такая вот стрелка ▲), либо предлагаю побольше почитать о свойстве CSS border .
В итоге я сам решил написать статью с трюками, которые можно провернуть при помощи свойств border и border-radius .
Все примеры в статье (кроме этой картинки) написаны на CSS, так что вы легко сможете посмотреть их исходный код.
Свойство border
Для начала давайте разберемся, на что вообще способен border , кроме как очерчивать границу в несколько пикселей вокруг элемента.
1. Треугольник (стрелка)
Возможно вы заметили, что этот пост помечен тегов «Ускорение сайта», вопрос — почему? Ответ кроется в том, что обычно, для создания стрелок на сайте, вебмастера используют картинки, более опытные используют спрайты или иконочные шрифты.
Но в рунете пока что чаще всего встречается именно тот вариант, в котором для каждой стрелки и каждого элемента интерфейса используется отдельная картинка, а каждая картинка — это отдельный HTTP-запрос, а значит минус к скорости загрузки сайта. Чем меньше таких запросов, тем выше скорость загрузки. Именно поэтому для создания стрелок и указателей более рационально использовать CSS (впервые такую фишку я заметил у гугла).
a href="#top">span style="color: #c1ef65;">"arr">span> наверхa>
CSS:
Только для стрелки, со ссылкой думаю вы и сами справитесь.
span.arr{ vertical-align: middle; margin: 0 5px; display: inline-block; width: 0; height: 0; border-top: 4px solid #96887E; border-left: 4px solid transparent; border-right: 4px solid transparent; }
Довольно неплохо, верно? Кроме того, эту стрелку вы можете сделать как пошире, так и поуже.
А теперь посмотрим на другие примеры.
2. Квадрат
HTML:
Необязательно использовать именно , можете взять вместо него , если хотите.
span style="color: #c1ef65;">"square">span>
CSS:
Как видите, стилей совсем немного, всё легко и просто.
span.square { width: 0; height: 0; display:inline-block; border: 40px solid; border-color: yellow green blue red; /* квадрат будет состоять из четырех разноцветных треугольников */ }
Свойство border-radius
1. Лимон
Весь HTML будет точно такой же, как и в предыдущем примере, мы лишь изменим класс элемента на lemon .
span.lemon { width: 200px; height: 200px; display:inline-block; background: #F5F240; border: 5px solid #F0D900; -moz-border-radius: 10px 150px 30px 150px; -webkit-border-radius: 10px 150px 30px 150px; border-radius: 10px 150px 30px 150px; }
В итоге получаем вот такой красивый лимон:
2. Блоки с речью
Для каждого из четырех последующих примеров будет использоваться следующий общий HTML и CSS:
span style="color: #c1ef65;">"talk">Привет, чувак!span>
span.talk{ display:inline-block; position: relative; background: #A0A0A0; width: 150px; height: 50px; line-height: 50px; color:#fff; text-align: center; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } span.talk:after{ content: ''; position: absolute; width: 0; height: 0; border: 10px solid; }
Теперь поглядим на каждый из примеров по отдельности, то есть сейчас в каждом случае к тем общим стилям будут добавляться эти несколько строчек кода.
В 1-м варианте стрелка находится внизу:
span.talk:after { border-color: #A0A0A0 transparent transparent transparent; top: 100%; left: 50%; margin-left: -10px; }
Для того, чтобы расположить стрелку в верхней части блока, просто меняем стили CSS из предыдущего варианта на:
span.talk:after { border-color: transparent transparent #A0A0A0 transparent; bottom: 100%; left: 50%; margin-left: -10px; }
Если же вам понадобится использовать несколько разновидностей блока, например все четыре варианта, то помимо класса talk пропишите к каждому элементу ещё по одному классу, например top, right, bottom, left.
В этом же примере стрелка находится справа:
span.talk:after { border-color: transparent transparent transparent #A0A0A0; top: 50%; left: 100%; margin-top: -10px; }
И последний, 4-й вариант со стрелкой слева:
span.talk:after { border-color: transparent #A0A0A0 transparent transparent; top: 50%; right: 100%; margin-top: -10px; }
3. Радиация CSS
HTML:
Как видите, во всех примерах (кроме блоков с речью) HTML практически не отличается, меняются только классы, хотя и их можно оставить одинаковыми, если вы не намерены использовать сразу всё это на одной странице.
span style="color: #c1ef65;">"biohazard">span>
CSS:
Стили практически такие же, которые мы использовали при создании квадрата, но здесь ещё также присутствует свойство border-radius.
.biohazard { display:inline-block; width: 0; height: 0; border: 55px solid; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border-color: black yellow black yellow; }
Ещё по теме CSS
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Треугольники через CSS
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.
Рис. 1. Треугольники в веб-дизайне
Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform .
Использование border
Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.
Рис. 2. Добавление border к элементу
Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).
Рис. 3. Элемент с прозрачными границами
В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .
Пример 1. Блок с треугольником
Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.
За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.
Геометрические фигуры на CSS
Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.
Квадрат
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Прямоугольник
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Круг
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Овал
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник вверх
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник вниз
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник налево
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник направо
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник в левом верхнем углу
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник в правом верхнем углу
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник в левом нижнем углу
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Треугольник в правом нижнем углу
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Параллелограмм
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Трапеция
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Звезда (6-конечная)
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Звезда (5-конечная)
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
#star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after
Пятиугольник
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Шестиугольник
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after
Восьмиугольник
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after
Сердечко
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after
Знак бесконечности
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after
Геометрические фигуры на CSS
![](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
Hobo 2022-07-25 в Вебмастер Комментариев: 2
![Фигуры на CSS](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20608%20467'%3E%3C/svg%3E)
Последнее обновление — 15 января 2023 в 15:02
Сегодня, благодаря возможностям языка описания внешнего вида HTML-документа, имеется возможность создавать самые разнообразные геометрические фигуры на чистом CSS. Каскадные таблицы стилей позволяют получить и квадрат, и круг, и треугольник, стрелку, звезду и даже цветок или сердечко, а также много других фигур.
- Окружность
- Квадрат
- Прямоугольник
- Овал
- Треугольник
- Треугольник, направленный вершиной вниз
- Треугольник, направленный вершинкой влево
- Треугольник, направленный вправо
- Ромб
- Ещё один ромб
- Трапеция
- Параллелограмм
- Звезда
- Шестиконечная звезда
- Пятиугольник
- Шестиугольник
- Восьмиугольник
- Сердце
- Яйцо
- Бесконечность
- Бабл (облачко) для комментария
- Pacman
- Лупа
- Флажок
- Крест
- Стрелка
- Конвертик или домик
- Полумесяц
Совсем не обязательно, к примеру, рисовать прямоугольник в Photoshop или другом графическом редакторе, чтобы использовать изображение в дизайне сайта. Его можно отобразить при помощи кода CSS. По-моему, это отличное решение, поскольку большое количество картинок замедляет работу сайта.
При помощи CSS и HTML возможно создавать не только статичные фигуры. Им можно придавать движение. Посмотрите, например, как сделать анимацию стрелки-маятника. Или как украсить свой сайт новогодней мигающей гирляндой на HTML и CSS.
В этой подборке будут представлены результаты работы кода при создании некоторых распространённых геометрических фигур. Это удобно при создании баннеров и других элементов в дизайне сайта.
Окружность
Чтобы создать окружность с помощью CSS, воспользуемся тегом div. И зададим значение “circle” для идентификатора.