У моїй статті про створення кнопки «наверх» мене часто просять, щоб я дав посилання на картинку зі стрілкою.
А я або пропоную використовувати HTML-сутність ▲ (в результаті виходить така ось стрілка ▲), або пропоную побільше почитати про властивість CSS border.
У підсумку я сам вирішив написати статтю з трюками, які можна провернути за допомогою властивостей border і border-radius.
Всі приклади в статті (крім цієї картинки) написані на CSS, так що ви легко зможете подивитися їх вихідний код.
властивість border
Для початку давайте розберемося, на що взагалі здатний border. крім як окреслювати кордон в кілька пікселів навколо елемента.
1. Трикутник (стрілка)
Можливо ви помітили, що цей пост позначений тегів «Прискорення сайту», питання - чому? Відповідь криється в тому, що зазвичай, для створення стрілок на сайті, веб-майстри використовують картинки, більш досвідчені використовують спрайт або іконочние шрифти.
Але в рунеті поки що найчастіше зустрічається саме той варіант, в якому для кожної стрілки і кожного елемента інтерфейсу використовується окрема картинка, а кожна картинка - це окремий HTTP-запит, а значить мінус до швидкості завантаження сайту. Чим менше таких запитів, тим вище швидкість завантаження. Саме тому для створення стрілок і покажчиків більш раціонально використовувати CSS (вперше таку фішку я помітив у гугла).
Розглянемо тепер приклад.