Стилизовать ссылку

@d3v1ldream · Регистрация: 31.03.2016

Студворк — интернет-сервис помощи студентам

Добрый вечер,возникла проблема с стилизацией ссылки, не могу понять как можно сделать стрелочку с помощью css.В общем, нужно сделать вот такую стрелочку:

Есть у кого нибудь какие то предложения?)))

@Fedor92 · 15.02.2017, 21:03

d3v1ldream, примерно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            display: inline-block;
            position:relative;
            width:100px;
            height: 50px;
            background: red;
            text-decoration: none;
            text-align: center;
            font:14px/50px Tahoma;
            color:#fff;
            border-radius:5px 0 0 5px 
        }
        a:after{
            content:"";
            position:absolute;
            right:-40px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 25px 0 25px 40px;
            border-color: transparent transparent transparent red;
        }
    </style>
</head>
<body>
<a href="#">15000 р.</a>
</body>
</html>

@Redzep · 15.02.2017, 21:05

https://jsfiddle.net/j11q4yr8/

HTML5
1
<div class="price">15500 Р.</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
* {
  box-sizing: border-box;
}
 
.price {
  position: relative;
  display: block;
  font-size: 20px;
  color: white;
  background-color: #ee3643;
  height: 40px;
  width: 100px;
  border-radius: 2px 0 0 2px;
  padding-top: 8px;
  padding-left: 15px;
}
 
.price::after {
  content: '';
  position: absolute;
  top: 0;
  right: -40px;
  border: 20px solid transparent;   
  border-left: 20px solid #ee3643;
}

@d3v1ldream · 15.02.2017, 21:18 **[ТС]**

Спасибо) У меня был похожий подход, но я забылся по after)

Добавлено через 8 минут

Сообщение от Fedor92

border-color: transparent transparent transparent red;

Извини конечно) А что эта строка делает? Она задает разные цвета для границ(влнп)?

@Fedor92 · 15.02.2017, 21:54

Сообщение от d3v1ldream

А что эта строка делает? Она задает разные цвета для границ(влнп)?

Строка из генератора треугольничков...

Можно легко заменить на:

CSS
1
border-color: transparent red

transparent - устанавливает прозрачный фон.

Новые блоги и статьи Все статьи Все блоги /
1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .

@d3v1ldream 0 / 0 / 0 Регистрация: 31.03.2016 Сообщений: 36

	Стилизовать ссылку 15.02.2017, 20:44. Показов 1396. Ответов 4 Метки нет (Все метки) Добрый вечер,возникла проблема с стилизацией ссылки, не могу понять как можно сделать стрелочку с помощью css.В общем, нужно сделать вот такую стрелочку: Есть у кого нибудь какие то предложения?))) 0

Стилизовать ссылку

Решение