Как реализовать такую галочку у формы

N
На сайте с 06.07.2010
Offline
116
499

Здравствуйте! Помогите пожалуйста с выводом формы. Нужно сделать такую форму, как представлено на скриншоте. Как реализовать такую галочку? Буду очень признателен, если поможете!

jpg 10.09.jpg
дани мапов
На сайте с 06.09.2012
Offline
204
#1

С картинкой не ошиблись? Никакой формы не видать.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
N
На сайте с 06.07.2010
Offline
116
#2

Если точнее, то галочку не у формы, а у рамки

HC
На сайте с 27.05.2013
Offline
3
#3
N
На сайте с 06.07.2010
Offline
116
#4

А без картинки как то возможно?

doom_seller
На сайте с 22.01.2009
Offline
78
#5

Не успел немного - опередили.

http://jsfiddle.net/CgBTn/50/

только вместо красного квадратика бекграундом вставить необходимую картинку с галочкой.

s17t
HC
На сайте с 27.05.2013
Offline
3
#6
nepeyvoda:
А без картинки как то возможно?

чистенько на css можно, но без обводки если будет. тк, треугольники, что я видел, через border делаются.

если же с обводкой, то два блока-треугольника делать, где один будет перекрывать другой цветом фона и оставлять лишь "обводку" (точнее, что не будет перекрываться блоком).

в общем, делай картинкой. это проще и не портит вид high-level-ccs-coding'а в файле стилей ;)

gtauter
На сайте с 08.06.2008
Offline
131
#7
nepeyvoda:
А без картинки как то возможно?

#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;

Когда-то тоже задавался подобным вопросом. Взято отсюда: http://markday.ru/link/go/840/, общая идея, думаю, ясна.

С уважением, Евгений. Моя визитка (gtauter.ru). Привет из "Теслы" :)
N
На сайте с 06.07.2010
Offline
116
#8

Вот это уже интересно ))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий