0

без картинок а только на чистом css

речь о декоре справа введите сюда описание изображения

3
  • 3
    шрифтом типа font-awesome, либо html сущностью 🡭 20 авг 2021 в 8:19
  • @highpassion ради одной картинки шрифт?
    – towncitybr
    20 авг 2021 в 8:24
  • откуда мне знать, сколько их у вас. используйте html entity, что я скинул 20 авг 2021 в 8:25

3 ответа 3

3

Вариант с градиентом от UModeL считаю лучший, но подкину вариант на блоках, ы.

.arrow {
  display: block;
  width: 100px;
  height: 100px;
  background: #f34841;
  position: relative;
  pointer-events: none;
  --ac: #fff; /* arrow color */
}

.arrow > span {
  display: block;
  width: 100%;
  height: 10%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.arrow::before,
.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top: 5%;
  right: 5%;
}

.arrow::before {
  width: 70%;
  height: 10%;
  border-radius: 10px 0 0 10px;
}

.arrow::after {
  width: 10%;
  height: 70%;
  border-radius: 0 0 10px 10px;
}

.arrow > span,
.arrow::before,
.arrow::after {
  background: var(--ac);
  pointer-events: all;
  cursor: pointer;
}

.arrow:hover {
  --ac: #aaa;
}
<div class="arrow">
  <span></span>
</div>

Даже есть своя таргет-зона у стрелки.

0
3

Как вариант, так. Находите спецсимволы стрелок, к примеру тут: https://unicode-table.com/ru/sets/arrow-symbols/#diagonal-arrows

Выбираете нужную вам стрелку, узнаёте её юникод или, что ещё лучше, код стрелки для css. Остальное - совсем просто. Кнопку я реализовал тегом a, изначально он строчный, я делаю его блочным ради отступов и возможности задавать ширину, а стрелку задаю псевдоэлементом after. Код примерный, окончательное оформление: цвета, шрифт и его размеры укажите сами.

.button {
  display: block;
  padding: 30px;
  background-color: #f34841;
  width: 300px;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  font-family: 'verdana', sans serif;
  color: #fff;
  position: relative;
}
 
.button:after {
  content: "\1F865";
  position: absolute;
  right: 20px;
}
<a href="#" class="button">Отправить</a>

6
  • Какой красивый квадратик вместо стрелки ;-)
    – UModeL
    20 авг 2021 в 10:22
  • 1
    @UModeL Упс, у меня в опере,и ff отображается стрелка.
    – Quazimorda
    20 авг 2021 в 10:26
  • везёт Вам :)) Я с Хрома сижу...
    – UModeL
    20 авг 2021 в 10:28
  • @UModeL, открыл в хроме, и тут у меня всё отображается. Но ваш вариант прекрасен и кроссбраузерный.
    – Quazimorda
    20 авг 2021 в 10:31
  • в FF тоже квадратик, но уже с кодом символа :) Я специально не обновляю шрифты в системе (Win7), чтобы тестить подобные случаи. И, думаю, ещё очень много простых пользователей даже не в курсе подобных нюансов. При этом я и остальные пользуемся последними версиями браузеров.
    – UModeL
    20 авг 2021 в 14:45
0

Как я понял тут 2 spanа. В первом надпись отправить и в втором стрелка ➚(&#129133). И в стилях у второго display : inline-block;. И у самой кнопки есть паддинги.

2
  • это да, так суть только в стрелке
    – towncitybr
    20 авг 2021 в 9:01
  • сделать без картинок. на чистом css
    – towncitybr
    20 авг 2021 в 9:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.