Создание и продвижение сайта

Как нарисовать треугольник в CSS и применить в меню

Как нарисовать треугольник в CSS? Для этого надо сделать квадрат с большими рамками, которые и будут четырьмя треугольниками, слагающими квадрат.
Часто приходится видеть простые горизонтальные меню на CSS, при наведении на которые появляется стрелочка. При создании сайта важен чистый короткий код, который дают меню на CSS.
Сначала научимся рисовать разноцветный квадрат в CSS.
Создадим блок для квадрата:

А вот и чудо-стили для него:

.kvadrat {
      border-color: red green blue orange;
      border-style:solid;
      border-width:30px;
      width:0;
      height:0;
}

Получаем результат:

Для получения треугольника из квадрата, мы просто ставим цвет остальных границ (частей) треугольника равный цвету фона сайта под квадратом. Получается такой листинг:

.treugolnik {
      border-color:#f7f7f7 #f7f7f7 blue #f7f7f7;
      border-style:solid;
      border-width:30px;
      width:0;
      height:0;
}

И результат:

Где #f7f7f7 – это цвет нашего фона сайта.
Для придания треугольнику более острого угла можно поиграться с шириной border.
Например:

.treugolnik {border-width:35px 40px 20px 40px;}

Теперь можно создать конструкцию из блоков, которую можно применить в создании меню либо как элемент дизайна.

<div class="knopochka">
  Привет, друг!</div>

Стиль CSS:

.knopochka {
     background-color:blue;
     color:#fff;
     border:0;
     font-size:35px;
     line-height:1.3em;
     margin:60px auto;
     padding:10px;
     position:relative;
     text-align:center;
     width:300px;
     height:50px;
}
.knopochka1 {
     border-color:#f7f7f7 #f7f7f7 blue #f7f7f7;
      border-style:solid;
      border-width:30px;
      width:0;
      height:0;
     position:absolute;
     top:-60px;
     left:30px;
}