• блог
• вопросы и ответы
• рецензии
• реклама на сайте
• RSS каналы
  3426 подписчиков
• наш твиттер
  426 фолловеров

Эксперименты с обводкой в CSS

26 марта 2009, 2:15 Павел Марковнин HTML и CSS рейтинг 17

Привет!

Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники. Поехали!

Простые геометрические фигуры

Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:

HTML

<div class="eg">
    <a class="polygon r3">
        <b class="trapezoid aa"></b>
    </a>
</div>

CSS

.trapezoid { vertical-align: text-bottom; } 

.trapezoid,
.polygon { display: -moz-inline-block; }

.polygon,
.trapezoid { margin:0; padding: 0; background: none; }

.polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }
.trapezoid {
    display: inline-block; width: 1px; height: 0; margin: 0 auto; 
    border-left: 5em solid transparent; border-right: 5em solid transparent;
}

.polygon .aa { border-bottom: 10em solid; border-top: none; }

.polygon.r2 { height: 0em; }
 
.polygon.r3 { height: 8.66em; }
.polygon.r3 .trapezoid { border-width: 8.66em 5em; }
 
div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }
div.eg .polygon { display: block; margin: 0 auto; }
 
.r3 { color: red; font-size: 0.5em; }

Да, вот еще немного примеров с пятиугольниками, шести- и восьмиугольниками (по мотивам Тантек.ком).

Звезда

Идем дальше. Может, звезду нарисуем, а? Раз простые геометрические фигуры уже умеем, надо что-то более сложное попробовать.

HTML

<a href="#" id="star">
    <span id="top"></span>
    <span id="center"><span>Звезда</span></span>
    <span id="bottom"></span>
</a>

CSS

#star{
	width: 15em;
	height: 14.27em;
	position: relative;
}

#star span,
#star{
	display: block;
}

#top{
	width: 0;
	height: 0;
	margin: auto;
	border-right: 4.64em solid transparent;
	border-left: 4.64em solid transparent;
	border-bottom: 14.27em solid;
}

#center{
	width: 5.7em;
	border-right: 4.65em solid transparent;
	border-left: 4.65em solid transparent;
	border-top: 3.36em solid;
	height: 0;
	position: absolute;
	top: 5.46em;
	left: 0;
	z-index: 100;
	text-align: center;
}

#bottom{
	position: absolute;
	bottom: 0;
	left: 2.852em;
	border-right: 4.635em solid transparent;
	border-left: 4.635em solid transparent;
	border-bottom: 3.4em solid #fff;
	width: 0;
	height: 0;
}

#center span{
	margin-top: -2em;
	color: #000;
	background-color: transparent;
	font-weight: bold;
}

a#star:hover #center span{
	color: #fff;
	background-color: transparent;
}

a#star{
	color: #f90;
	background-color: transparent;
}
a#star:hover{
	color: #fc3;
	background-color: transparent;
}

Смотрим пример со звездой. Мне нравится ;-)

Практическое применение

Всякие там эксперименты конечно хорошо, но было бы еще лучше, если бы это все можно было бы применить на практике. Давайте-ка, к примеры, попробуем сделать тултип с указателем без картинок вообще.

HTML

<div class="fg-tooltip ui-widget ui-widget-content ui-corner-all">
    Вот тут содержимое тултипа
    <div class="fg-tooltip-pointer-down ui-widget-content">
        <div class="fg-tooltip-pointer-down-inner"></div>
    </div>
</div>

CSS

.fg-tooltip {
	padding: .8em;
	width: 12em;
	border-width: 2px !important;
	position: absolute;
}
.fg-tooltip .fg-tooltip-pointer-down, .fg-tooltip .fg-tooltip-pointer-down-inner {
	position: absolute; 
	width:0; 
	height:0; 
	border-bottom-width: 0;
	background: none;
}
.fg-tooltip .fg-tooltip-pointer-down {	
	border-left: 7px solid transparent; 
	border-right: 7px solid transparent;
	border-top-width: 14px;
	bottom:	-14px;
	right: auto;
	left: 50%;
	margin-left: -7px;
}
.fg-tooltip .fg-tooltip-pointer-down-inner {
	border-left: 5px solid transparent; 
	border-right: 5px solid transparent;
	border-top: 10px solid #fff;
	bottom:	auto;
	top: -14px;
	left: -5px;
}

Смотрим пример такого тултипа. За него спасибо Филамент Групп.

Еще немного примеров

• Елка и необычная верстка от Эрика Мейера;
• Плитка и менюшка от главного технолога Технократи;
• Страничка с экспериментами и другой вариант звезды;
• Флаг Великобритании и восьмиконечная звезда от нашего читателя Павла Сорокина;
• Маяк с CSS Play;
• Похожая статья с Фаст Кодера.

Если у вас, дорогие, читатели, есть что показать по теме, пишите в комментах, дополню список.

А теперь о грустном

Все это клево, но если вы — ярый приверженец валидности во всем, то спеш вас огорчить — значение transparent не является валидный для описания свойств обводки в CSS.

Заключение

Итак, надеюсь урок был интересным и полезным. Если есть замечания, дополнения, вопросы или советы, то для этого у нас есть комментарии, так что не стесняемся ;-)

Автор статьи: Павел Марковнин

Понаписал еще 106 статей.

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

• Адрес электронной почты
•