Треугольники, стрелки, квадраты и лимон при помощи свойств CSS border и border-radius

В моей статье про создание кнопки «наверх» меня часто просят, чтобы я дал ссылку на картинку со стрелкой.

А я либо предлагаю использовать HTML-сущность ▲ (в итоге получается такая вот стрелка ▲), либо свой плагин для вордпресс, в котором я реализовал стрелки в виде иконочного шрифта, либо предлагаю побольше почитать о свойстве CSS border.

В итоге я сам решил написать статью с трюками, которые можно провернуть при помощи свойств border и border-radius.

Трюки со свойствами CSS border и border-radius

Все примеры в статье (кроме этой картинки) написаны на CSS, так что вы легко сможете посмотреть их исходный код.

Свойство border

Для начала давайте разберемся, на что вообще способен border, кроме как очерчивать границу в несколько пикселей вокруг элемента.

1. Треугольник (стрелка)

Возможно вы заметили, что этот пост помечен тегов «Ускорение сайта», вопрос — почему? Ответ кроется в том, что обычно, для создания стрелок на сайте, вебмастера используют картинки, более опытные используют спрайты или иконочные шрифты.

Но в рунете пока что чаще всего встречается именно тот вариант, в котором для каждой стрелки и каждого элемента интерфейса используется отдельная картинка, а каждая картинка — это отдельный HTTP-запрос, а значит минус к скорости загрузки сайта. Чем меньше таких запросов, тем выше скорость загрузки. Именно поэтому для создания стрелок и указателей более рационально использовать CSS (впервые такую фишку я заметил у гугла).

Рассмотрим теперь пример.

HTML:

<a href="#top"><span class="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>, можете взять вместо него <div>, если хотите.

<span class="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 будет точно такой же, как и в предыдущем примере, мы лишь изменим класс элемента <span> на 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 class="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 class="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;
}
Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Ещё по теме CSS

Комментарии 2

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Vladislav: Подправил имеющийся у меня код, по вашим рекомендациям, миниатюры начали отображаться, но они стали очень огромными, что...

  • Миша: Лишь предложил решение. Думаю можно нашаманить и так, чтобы чисто для рубрик было, не уверен только, что обойдётся без и...

  • Алексей: так надо комментарии в рубриках, а не на страницах в category.php а не в page.php

  • Миша: Здравствуйте! Сам WordPress это не поддерживает, но можно пойти хитрым путём. Первое, что пришло мне в голову, это:...

  • Алексей: Миша, здравствуйте! Подскажите, пожалуйста, что нужно, чтобы сделать комментарии на страницах рубрик. Я когда то давно...