4 / 4 / 2
Регистрация: 10.08.2015
Сообщений: 162
1

Стиль для подсказки

24.12.2016, 22:50. Показов 1753. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Подскажите пожалуйста как реализовать красную рамку для всплывающей подсказки как на картинке
Миниатюры
Стиль для подсказки  
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.12.2016, 22:50
Ответы с готовыми решениями:

Как задать новый стиль для тега, у которого уже есть стиль
Привет всем. У меня есть вот такая запись в таблице стилей #c_menu li{ list-style:none;...

Прошу подсказки для создания кода для макроса в Excel
Добрый день. Возникла ситуация на работе, что необходимо сравнивать данные из двух таблиц на разных...

Плагин для VS для подсказки имен аргументов
Есть в Intellij IDEA такая фича, явные подсказки имен аргументов (скрин ниже). Интересует, есть ли...

Подсказки для кнопки
Windows Forms. Требуется, чтобы всплывала подсказка, когда наводишь курсор на кнопку. Нужен лишь...

3
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
25.12.2016, 00:22 2
Кругу со знаком вопроса position:relative, в него поместить блок с подсказкой, которому position:absolute и оформить блок, как надо
0
4 / 4 / 2
Регистрация: 10.08.2015
Сообщений: 162
25.12.2016, 02:47  [ТС] 3
спасибо) трудности не с позиционированием, а с реализацией краской рамки
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
25.12.2016, 14:30 4
Лучший ответ Сообщение было отмечено a4t_ech как решение

Решение

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
26
27
28
29
30
31
32
33
34
.block {
  margin: 60px;
  border: 2px solid tomato;
  width: 100px;
  height: 50px;
  position: relative;
  border-radius: 2px;
}
.block:before {
  position: absolute;
  content: '';
  top: -30px;
  right: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 30px 15px;
  border-color: transparent transparent tomato transparent;
  -webkit-transform: skew(-30deg);
          transform: skew(-30deg);
}
.block:after {
  position: absolute;
  content: '';
  top: -26px;
  right: 23px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 30px 14px;
  border-color: transparent transparent white transparent;
  -webkit-transform: skew(-30deg);
          transform: skew(-30deg);
}
HTML5
1
<div class="block"></div>
1
25.12.2016, 14:30
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.12.2016, 14:30
Помогаю со студенческими работами здесь

Подсказки для полей ввода
Друзья, помогите, пожалуйста с заданием. С JavaScript раньше дела не имела, только начала...

Wxpython. Задержка для подсказки
Привет. Подскажите, как можно сделать задержку для подсказки? Пытался использовать wx.ToolTip и...

Всплывающие подсказки для кнопок
Есть подсказки для кнопок. Всё хорошо, но на других разрешениях эти подсказки съезжают влево. Как...

Подсказки для сборки хорошего игрового ПК
Подскажите, хорошая ли сборка для комфортной игры в Ведьмак 3, ГТА 5, AS Unity? Процессор: Intel...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru