Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Треугольник только на CSS

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: как так получается?
Саныч
Отправлено: 06 Мая, 2011 - 23:27:55
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




есть простенький css
CODE (htmlphp):
скопировать код в буфер обмена
  1. #test {
  2.         width: 0;
  3.         height: 0;
  4.         border-left: 50px solid transparent;
  5.         border-right: 50px solid transparent;
  6.         border-bottom: 100px solid red;
  7. }

в итоге получаем треугольник, раньше применял подобное, но как-то не задумывался, а почему собственно браузер именно так прорисовывает указанные свойства...
элемент блочны, т.е. с прямыми углами, мы добавляем с трех сторон бордюр, по идеи должны получить 3 прямых границы... получаем же фигуру... Вопрос: почему?


-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
IllusionMH
Отправлено: 15 Мая, 2011 - 05:37:13
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




Саныч, посмотрите на деревянные рамки для фотографий или картин. Чтобы они смотрелись красиво, что они делаются из 4 "досок" с соединением под углом 45 градусов.
Аналогично в браузерах.

Схема границ элемента для ширины границы больше 1рх

Если смотреть только на линии толщиной в 1 px, то кажется что они прямоугольные. Если смотреть на границы с шириной 2-3 пикселя и имеющих различный цвет (имитация объема у таблицы) то уже становиться слегка заметен срез, а если вы поиграете с шириной границы, то увидите картину, аналогичную рисунку выше.

Теперь нам нужно получить треугольник.
1) Если попытаться добавить только нижнюю границу, то получиться прямоугольник, который заканчивается на уровне правого и левого края элемента.
2) Чтобы получить границу под углом 45 градусов, нужно добавить границы(для наглядности сначала разноцветные)
3) Убираем плоскость, которая обрезает верхний угол прямоугольника
4) Делаем боковые границы прозрачными (белый цвет - фоновый цвет документа)
Треугольник готов.


Для получения углов, отличных от 45 градусов необходимо изменить соотношение в ширине границ.
К примеру(угол относительно горизонтали - нижняя граница: левая граница):
30 градусов - 5:3
45 градусов - 1:1
60 градусов - 3:5
Для правой стороны - симметрично.

P.S. До этого момента не догадывался о том, как добиться углов отличных от 45 градусов Улыбка
 
 Top
Champion Супермодератор
Отправлено: 15 Мая, 2011 - 07:57:45
Post Id



Активный участник


Покинул форум
Сообщений всего: 4350
Дата рег-ции: Авг. 2008  
Откуда: Москва


Помог: 57 раз(а)




Какая интересная штука. IllusionMH спасибо за такой глубокий исчерпывающий ответ (хотя вопрос и не я задавал) Улыбка
 
 Top
Саныч
Отправлено: 15 Мая, 2011 - 09:51:22
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




IllusionMH, действительно спасибо за такой подробный ответ... Достаточно было б прикрепить просто 2 картинку, я как ее увидел, сразу смекнул где я просчитался. Я думал, почему браузер вырисовывает треугольник вместо блока с прямыми углами... А он то как раз и рисует прямые углы и линии, просто видим мы не все. Я просто не подумал про скос в 45 градусов... Вобщем спасибо...
з.ы. по такой технологии можно сделать не только треугольник, еще зведы, сердце, и др. различные фигуры...
з.ы.2 вчера пытался сделать по такой схеме красный треугольник с черной рамкой в 1 пиксель... получилось, но немного кривовато, как доделаю обязательно отпишусь...
з.ы.3 может кто подскажет, как сделать уголок на подобие того, что на сообщении в панели состояния винды (рядом с часами)


-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
IllusionMH
Отправлено: 15 Мая, 2011 - 18:47:04
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




Champion,Саныч, всегда пожалуйста Улыбка

Саныч пишет:
з.ы. по такой технологии можно сделать не только треугольник, еще зведы, сердце, и др. различные фигуры...

Оно то можно, но вот будет ли профит оправдывать средства? Проще уже по канве нарисовать Улыбка

Саныч пишет:
з.ы.2 вчера пытался сделать по такой схеме красный треугольник с черной рамкой в 1 пиксель... получилось, но немного кривовато, как доделаю обязательно отпишусь...
з.ы.3 может кто подскажет, как сделать уголок на подобие того, что на сообщении в панели состояния винды (рядом с часами)

Вы имеете в виду такой?

Если да, то вот мой вариант. Добавление границы и создание попапа Улыбка

Думаю комментарии все достаточно описывают, но если что - отвечу на вопросы.
CODE (html):
скопировать код в буфер обмена
  1. <div class="popup">
  2.   <div class="triangle"></div>
  3. </div>

CODE (css):
скопировать код в буфер обмена
  1. .triangle { /*создаем треугольник, который будет имитировать границу*/
  2.   height: 0px;
  3.   width: 0px;
  4.   position: absolute;
  5.   bottom: -23px; /*перемещаем его под наш попап*/
  6.   right: 10px;     /*сдвигаем от скругленного угла*/
  7.  
  8.   border-right: 23px solid #000000; /*делаем правую сторону прямой*/
  9.   border-bottom: 23px solid transparent; /*"вырезаем" треугольник*/
  10. }
  11. .triangle:before {  /*вот добавляем "выпирающий уголок попапа"*/
  12. /*аналогичный треугольник, только чуть меньше, чтобы граница "выступала" вокруг него*/
  13.   border-left: 20px solid transparent;
  14.   border-top: 20px solid #f4f4f4;
  15.  
  16.   content: ''; /*эта строка обязательна, иначе не будет отображаться*/
  17.   position: absolute; /*эта строка обязательна, иначе не будет отображаться поверх основного элемента в некоторых браузерах*/
  18.   left: 2px; /*сдвиг, чтобы отобразить диагональную границу*/
  19. }
  20.  
  21. .popup {  /*само тело попапа*/
  22.   width: 150px;  
  23.   height: 85px;  
  24.  
  25.   position: relative; /*позволит позиционировать относительно элемента, на котором вызывается попап*/
  26.   left: 100px;
  27.   top: 100px;
  28.  
  29.   background: #f4f4f4;  
  30.   border: 1px solid #000000;  
  31.   border-radius: 10px;
  32.   padding: 10px;
  33. }


P.S. Вот здесь я увидел трюк с :before. Конечно можно сделать и через вложенный div, но это слегка усложняет html разметку.

P.P.S. Еще попробую реализовать весь попап одним дивом Улыбка Если получится - отпишусь

Added
Как и обещал - создал отдельный топик для pop-up'а

P.S. Саныч, было бы здорово увидеть способ рисования различных фигур ;)

(Отредактировано автором: 15 Мая, 2011 - 21:43:02)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB