CSS стрелки
Здесь вы узнаете, как сделать стрелки при помощи CSS.
Как сделать стрелки на CSS
Шаг 1) Добавляем HTML:
Стрелка вправо:
Стрелка влево:
Стрелка вверх:
Стрелка вниз:
Шаг 2) Добавляем CSS:
.arrow < border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; >.right < transform: rotate(-45deg); -webkit-transform: rotate(-45deg); >.left < transform: rotate(135deg); -webkit-transform: rotate(135deg); >.up < transform: rotate(-135deg); -webkit-transform: rotate(-135deg); >.down
Как сделать — Стрелки
Вправо стрелка:
Влево стрелка:
Вверх стрелка:
Вниз стрелка:
Шаг 2) Добавить CSS:
Пример
i <
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
>
.right transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
>
.left transform: rotate(135deg);
-webkit-transform: rotate(135deg);
>
.up transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
>
.down transform: rotate(45deg);
-webkit-transform: rotate(45deg);
>
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Стрелка на чистом css
Нужно сделать такую стрелку на css.высота стрелки 10px.
Отслеживать
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
задан 28 июл 2019 в 6:41
31 3 3 бронзовых знака
Используйте ::before , ::after и border и будет вам счастье.
28 июл 2019 в 6:43
а как бордер правильно использовать
28 июл 2019 в 6:54
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Используйте 2 бордера и transform:rotate(45deg);
.arrow < width: 30px; height: 30px; background-color: #f61; >.arrow:after < content: ''; display: block; border-right: solid #fffa; border-top: solid #fffa; width: 7px; /* sqrt(7*7 + 7*7) */ height: 7px; /* это примерно 10 */ transform: translate(8px, 10px) rotate(45deg); >Отслеживать
ответ дан 28 июл 2019 в 6:55
Stranger in the Q Stranger in the Q
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков
подскажите пж как его позиционировать теперь
28 июл 2019 в 7:10
он у меня в другом блоке и я хочу ему сделать падинг справа но стрелка деформируется
28 июл 2019 в 7:11
если покажете — исправлю
28 июл 2019 в 7:12
Добавьте новый код:
Отслеживать
32.2k 15 15 золотых знаков 61 61 серебряный знак 93 93 бронзовых знака
ответ дан 28 июл 2019 в 6:48
9 1 1 бронзовый знак
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Нарисовать стрелку на css с возможностью задать маленький бордер
Мне нужно нарисовать стрелку. как на картинке (слева сверху) у меня получилось нарисовать это только так.
div < margin: 100px auto; width: 50%; height: 200px; position: relative; border: 1px solid black; background: #f2fbff; >div::before < content: ''; display: block; width: 15px; height: 15px; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); clip-path: polygon(0 0, 0% 100%, 100% 100%); position: absolute; top: -16px; left: 20px; border: 1px solid black; border-bottom: none; background: #f2fbff; >div::after
Есть способ сделать это проще, не используя два псевдо-элемента?
Отслеживать
задан 27 янв 2020 в 23:11
165 2 2 серебряных знака 11 11 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Как вариант с одним псевдоэлементом:
.tip < margin: 20px auto; width: 50%; height: 90px; position: relative; z-index: 0; filter: drop-shadow(-1px -1px 0 #000); >.tip:after
Отслеживать
ответ дан 28 янв 2020 в 0:02
2,983 13 13 серебряных знаков 28 28 бронзовых знаков
Почему так много людей использует clip-path ? Поддержка его без префикса составляет 68% на данный момент, с префиксом 92%
28 янв 2020 в 10:40
@MoloF Во-первых я просто продолжил идею ТСа. Во-вторых clip-path хорош тем, что даже если оставшиеся 8% зайдут на ваш сайт, ничего страшного не произойдет, они просто увидят целый прямоугольник вместо обрезанного, самое главное, а именно контент внутри него останется на своем месте. Ну и в случае с неоднородным фоном он прекрасно сыграет свою роль. Можете предлагать свои решения в чем проблема?