Эксперименты с обводкой в 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.
Заключение
Итак, надеюсь урок был интересным и полезным. Если есть замечания, дополнения, вопросы или советы, то для этого у нас есть комментарии, так что не стесняемся ;-)
Рекомендуем почитать
