Трюки с border 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. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

43 CSS Borders

Collection of hand-picked free HTML and CSS border code examples from Codepen, GitHub and other resources. Update of May 2021 collection. 15 new items.

Related Articles

Author

Links

Made with

About a code

Animated Border Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Partial Gradient Border

Partial gradient border surrounding a circle image, which is done with a CSS conic gradient and a radial gradient mask.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border with Rounded Corners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Background Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Patterned Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Custom Dashed Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Colorful Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border + Transparent Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Border Linear-Gradient + Border-Radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Corner-only Border

Corner-only border (allows for corner rounding & gradient border).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

8bit border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

8-bit Pixel Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Avatar Border Effect. 15 Declarations, 1 Element, No Pseudos

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Use SVG for border-image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Gradient Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Borders & Gradients

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Multiple Border-Radius Values

You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Candy Stripe Border Using Clip-Path

Create a responsive candy stripe border using the clip-path property on each of the list items in a ul . Change the height, background color, and stripe color very easily.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Offset and XOR Frame: Lively

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Full Screen Vintage Frame with Multiple Borders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Circular Border Patterns

The border patterns are created with clip-path on a pseudo-element.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Fitted Border Image the Easy Way

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Map-Inspired Border

Map-inspired border effect using stacked border & box-shadows . Single HTML element with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Blurred Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Magic Borders

Try to have a dynamic and responsive table that has borders only between cells.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Interactive Button Border

Button with an interactive border gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник