Создать треугольник с помощью CSS

Опубликовано: 8 Октябрь 2010Автор ratemir

ТреугольникЯ видел много разных способов создания обычного треугольника. Начиная, с простых изображений, созданных на photoshop, заканчивая php и javascript. Почему треугольник? Потому что эта фигура используется чаще других на сайтах. Хотя бы как элемент навигации. Хочу показать Вам ещё один метод того как можно нарисовать треугольник с помощью таблиц стилей CSS, не прибегая к громоздким кодам.

Мы используем такой атрибут CSS как border (граница), а вывод на экран монитора будет осуществляться при помощи тега <div> Принцип действия такой: одной стороне границы контейнера <div> будет присвоен выбранный Вами цвет стрелки и нужный размер, а остальные стороны останутся прозрачными. Для демонстрации, я привел пример того что у нас получится и соответствующий код:

Код разметки

<div class="css-arrow-multicolor"></div>

И добавляем немного стилей

.css-arrow-multicolor {
      border-color: red green blue orange;
      border-style:solid;
      border-width:20px;
      width:0;
      height:0; 
}

Или сокращенный вариант

<div style="border-color: red green blue orange;  border-style:solid;  border-width:20px;  width:0;  height:0;"></div>

border-color: red green blue orange; Выберите направление треугольника(вниз, направо, вверх, налево) и замените три других цвета на цвет фона Вашего сайта.

border-width:20px; Размер границ и собственно самого треугольника.

На данный момент мы имеем прямоугольный треугольник(угол 90°) Чтобы сделать его острым нужно просто поменять размеры границ, например:

border-width:25px 10px 15px 30px;

Играя этими значениями можно менять форму треугольника как Вам угодно.

Вот пример, когда не используя изображений достигается ниже представленный эффект с помощью наложения треугольника.

Здравствуйте!

Вот как это делается. Сначала, с помощью контейнеров <div>, скажем так, очерчиваем контуры нашей будущей фигуры.

<div class="chat-bubble">  Здравствуйте!
      <div class="chat-bubble-arrow-border"></div>
      <div class="chat-bubble-arrow"></div>
</div>

А добавляя стили CSS мы придаем форму и получаем то, что у нас получилось.

.chat-bubble {
     background-color:#EDEDED;
     border:2px solid #666666;
     font-size:35px;
     line-height:1.3em;
     margin:10px auto;
     padding:10px;
     position:relative;
     text-align:center;
     width:300px;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     -moz-box-shadow:0 0 5px #888888;
     -webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
     border-color: #666666 transparent transparent;
     border-style: solid;
     border-width: 10px;
     height:0;
     width:0;
     position:absolute;
     bottom:-22px;
     left:30px;
}
.chat-bubble-arrow {
     border-color: #EDEDED transparent transparent;
     border-style: solid;
     border-width: 10px;
     height:0;  width:0;
     position:absolute;
     bottom:-19px;
     left:30px;
}

Данный метод не будет работать в IE6, как всегда:), главным образом потому, что IE6 не поддерживает прозрачность(transparent) границ, но существует способ это исправить.
Необходимо добавить к существующим стилям следующее:

/* IE6 */ .chat-bubble-arrow {
     _border-left-color: pink;
     _border-bottom-color: pink;
     _border-right-color: pink;
     _filter: chroma(color=pink);
}

Мы придали «прозрачным» сторонам цвет, например, розовый(pink), а затем использовали фильтр: chroma (color=pink), который делает цвет прозрачным.

Метки: Рубрика: Дизайн


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

2 комментариев к “Создать треугольник с помощью CSS”

  • Dark Slayer
    4 Январь, 2011, 18:39

    СПАСИБО Вам огромное!!!!!! ООочень помогли!

  • Aus bus
    26 Июль, 2011, 8:49

    Спасибо. Заняться, что ли, рисованием схем для оригами и наводнить сеть CSS-журавликами...

    ie6 вот подсказывает, что для него важно обнулять line-height. Если не нужна трапеция.

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

Наверх