Треугольнички на чистом CSS
Где-то на просторах интернета мной был честно подсмотрен оригинальный способ создания прямоугольных треугольничков с помощью CSS-свойстваborder
.
Вот пример направленного вверх треугольника высотой 10 пикселей и шириной 20 пикселей.
.triangle { position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e0e0e0; }
В данном случае у нас получился блок нулевого размера с видимой нижней рамкой и прозрачными боковыми. Но у этого способа есть недостаток — в некоторых браузерах (например, Firefox) в месте перехода нижней рамки в боковую будет наблюдаться неприятная темная окантовка, так как истинный цвет боковых рамок будет черным. Поэтому заменимtransparent
наrgba(224, 224, 224, 0)
.
.triangle { position: absolute; border-left: 10px solid rgba(224, 224, 224, 0); border-right: 10px solid rgba(224, 224, 224, 0); border-bottom: 10px solid #e0e0e0; }
Полученный результат будет без указанного выше недостатка.
https://habrahabr.ru/post/161041/