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

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

Привет!

Как вы думаете, можно ли с помощью пары тегов и чистого 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;
}

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

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

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

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

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

Заключение

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

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 17

remal
Да, известная фишка. Проблема в том, что Опера не сглаживает границы. При маленьких (или слишком больших) углах в ней выглядит хреново.
#
remal
zihotki
На хабре были статьи, где подобными триками и более сложные картинки делали, более того, имеется jpg2css преобразователь:
http://habrahabr.ru/blogs/css/46135/

#
zihotki
sergy
скажите мне, жопера хоть что-то нормально делать умеет? )
guest
у меня опера делает 99% поставленных ей задач для серфинга. А если у вас она что-то не делает ,то это у вас что-то с оперой. Хотя как вариант у вас не опера, а как вы выразились - жопера. но тут ........
#
guest
surger
под ie6 кракозябры :(
#
surger
Grin
А что вы хотите, это же ИЕ6. В пятом не смотрели? ;-)
#
Grin
егор
Да, спасибо, интересная штука)
#
егор
Grin
Игорь, спасибо, добавил ссылку в примеры.
#
Grin
geo
Вот бы ещё кто-нибудь смайлики научился через css рисовать :)
#
geo
Пузатый
Весьма интересное решение, хотелось бы вас попросить посмотреть на проблему футера моего блога в Opere при оставлении комментариев.
alex
Под ie6 все ещё много народу сидит поэтому эту технику нельзя использовать на практике если только на будущее.
#
alex
remal
> Под ie6 все ещё много народу сидит поэтому эту технику нельзя использовать на практике если только на будущее.
В IE6 все норм. Для рунета проблема только в Опере с ее отсутствием сглаживания границ.
#
remal
Dogger
Интересно:), надеюсь где-нибудь мне понадобится использовать данный метод:).
Kirill
Сафари рендерит без сглаживания, на некоторых углах границы фигур могут выйти ступенчатными.
madcap
Со звездой траблы - если на другом(не белом) фоне её вставить! Может кто подскажет - где поправить css?
#
madcap  
jok3rl
Спасибо! :) очень помогла статья! :)

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler