Треугольники с тенью на CSS

http://css-tricks.com/triangle-with-shadow/
  • Перевод
Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью?



Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман.
Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, потому что получим что-нибудь в таком роде:



Давайте посмотрим на несколько альтернативных решений.

Используем Unicode


Среди unicode-символов есть несколько треугольников. Например:

▲ ▼

Больше вариантов можно найди здесь.
Если использовать такой вариант треугольника, то с ним можно делать всякие забавные штуки

<span class="triangle">▲</span>


.triangle {
   color: #BADA55;
   text-shadow: 0 0 20px black;
}


Т.е. цвет, тень, размер, все на ваш выбор. Кроме того, если форма треугольника вас не устраивает, можно воспользоваться CSS3 трансформациями для того, чтобы растянуть или повернуть его.

.triangle {
  display: inline-block;   
  transform: scaleX(2.5); /* Не забываем про префиксы */
  color: #BADA55;
  text-shadow: 
    0 2px 2px rgba(255,255,255,0.7), 
    0 10px 4px rgba(0,0,0,0.5);
  font-size: 32px;
}



Ссылка на пример

Мне нравится эта техника, но в ней есть несколько проблем, и главная из них — слабая поддержка CSS3-трансформаций браузерами. Особенно в IE8. Хотя с другой стороны, эта статья о тенях, поэтому нам нужен CSS3 в любом случае. К тому же, старые браузеры могут иметь проблемы с unicode-иконками сами по себе.

Метод Double-Box


Зная CSS3 на неплохом уровне, можно использовать еще один метод, где используется контейнер с overflow:hidden с другим контейнером внутри, который повернут внутри внешнего на 45 градусов. Таким образом, видимая часть и будет нашим треугольником. Теперь можно использовать box-shadow для обоих контейнеров чтобы добавить к ним тень и достичь нужного эффекта.

<div class="triangle"></div>


.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg); /* Не забываем про префиксы */
   top: 75px;
   left: 25px;
   box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}



Обратите внимание, что используется негативное значение радиуса для родительского блока, таким образом образовывается тень только с одной стороны.
Ссылка на пример

Просто используем изображение


Я не большой фанат такого способа, потому что это или дополнительный HTTP запрос, или дополнительные манипуляции со спрайтом. К тому же, простое изображение не очень подходит для адаптивного дизайна — проблемы с масштабированием, плюс будет видна пикселизация на дисплеях с повышенной плотностью пикселей. В то же время, первые две техники позволяют манипулировать треугольниками как векторными объектами — без всяких пикселизаций.

Internet Explorer продолжает вставлять палки в колеса, накладывая некоторые ограничения на использование первых двух техник, однако нам никто не мешает вовсю применять их в верстке мобильных сайтов.

Дополнительный вариант: используем canvas


Здесь придется выйти за рамки CSS, однако эта техника также довольно перспективна

<canvas id="triangle" height="50" width="50">Triangle</canvas>


var canvas = document.getElementById('triangle');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(10, 25);
    context.lineTo(40, 10);
    context.lineTo(40, 40);
    context.lineTo(10, 25);

    context.closePath();
    context.shadowColor = "rgba(0, 0, 0, 0.4)";
    context.shadowBlur = 7;
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 5;
    context.fillStyle = "rgba(132, 28, 255, 0.8)";
    context.fill();



Ссылка на пример
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 13
  • +14
    color: #BADA55;
    

    Хороший цвет, да =)
  • +8
    В «Метод Double-Box» вместе/вместо overflow: hidden; можно добавить clip: rect(auto, auto, auto, auto);, что «обрежет» нижнюю часть вмете с тенью (полезно, если например под треугольником будет еще какой-то блок с тенью), соответственно не забыть сменить position на absolute.
    .triangle-with-shadow {
       width: 100px;
       height: 100px;
       position: absolute;
       /*overflow: hidden;*/
       box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
       clip: rect(auto, auto, auto, auto);
    }
    
    • +2
      C unicode есть еще один нюанс. Нельзя применить тень с inset, т.к. в text-shadow этого параметра просто нет, а внутренняя тень иногда нужна.
      • +1
        Ну там как бы еще куча всяких нюансов:
        • Это не настоящий элемент, то есть внутри него нельзя поместить текст (хотя решаемо экстра-разметкой, но это не будет на 100% надежно)
        • ClearType-сглаживание в крупных кеглях смотрится так себе, так что и края этого треугольника будут не очень
        • Может так случиться, что этого символа не окажется в шрифтовом файле пользователя
      • –1
        15 строк кода на то, чтобы показать один жалкий треугольник. Мда…
        В последнее время мне всё чаще кажется, что веб-строительство явно развивается не в том направлении.
        • 0
          Почему же жалкий? Вполне даже симпатичный. Для жалкого хватит и пять строк :)
          • 0
            Знаете, мне даже ради наипрекраснейшего треугольника/квадратика/кружка жалко пяти строк кода =)))
          • +2
            Вёрстка без картинок — это бесплатное снижение нагрузки на сервер.
            • 0
              Я не против вёрстки без картинок.
              Я против того, чтобы картинка заменялась пятнадцатью (или около того) строками кода.
          • +3
            Сервис UTF-графики потрясающий. Спасибо за это.
            • +1
              Да, теперь больше не нужно лезть в википедию в раздел «все символы Unicode».
            • 0
              here comes problem

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