Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.16.212.99] |
|
Сообщ.
#1
,
|
|
|
Всем привет вот мучает вопрос, как сделать div блок такой формы (см. пикчу)
Цитата Видел что из дивов можно много что рисовать но у самого так не получилось как мне надо сделать Прикреплённый файлdiv.jpg (7,08 Кбайт, скачиваний: 983) Нужно что бы он книзу сужался как сделать? |
Сообщ.
#2
,
|
|
|
А все допер сам
Вот каму надо <div></div> div{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 200px; border-top: 100px solid #000; border-right: 50px solid transparent; } |
Сообщ.
#3
,
|
|
|
Цитата 0xFF @ Вот каму надо А где здесь задается сужение? Ниче не понял. Добавлено Но работает |
Сообщ.
#4
,
|
|
|
Цитата DIS @ А где здесь задается сужение? Ниче не понял. через бордеры. Это примерно как известная техника делать треугольнички с помощью обычного border-top\bottom\left\right Добавлено хотя яб делал влоб, ибо подбирать соотношение оных - проще убиться. Влоб == before\after элемент c transform: rotate(?deg) |
Сообщ.
#5
,
|
|
|
для таких фигур есть специальный модуль называется SVG
|
Сообщ.
#6
,
|
|
|
Morr123 svg не кешируется в Blink браузерах - это связано с одним багом: https://bugs.chromium.org/p/chromium/issues/detail?id=580809 Из этого следует, что при ререндере лайаута (например при изменении стилей ДОМа) - оно всё перерисовывается, подозреваю что и при скроллах тоже.
Предваряя вопросы - да, багу может и поправили, но не забываем о мобильных браузерах, которые: 1) Не обновляются 2) Медленные (ресурсы телефона какбэ) Из чего следует, что 1) svg использовать можно лишь в самых крайних случаях, когда просто нет других вариантов 2) Когда ресурс внутренний и\или не рассчитан на мобильные телефоны |
Сообщ.
#7
,
|
|
|
Вот спасибо за информацию) Учту)
|