На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Как сделать div блок такой формы?, Нужно сделать div блок необычной формы ?
    Всем привет вот мучает вопрос, как сделать div блок такой формы (см. пикчу)
    Цитата
    Видел что из дивов можно много что рисовать но у самого так не получилось как мне надо сделать

    Прикреплённый файлПрикреплённый файлdiv.jpg (7,08 Кбайт, скачиваний: 600)
    Нужно что бы он книзу сужался
    как сделать?
      А все допер сам
      Вот каму надо
      ExpandedWrap disabled
        <div></div>

      ExpandedWrap disabled
        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;
        }
        Цитата 0xFF @
        Вот каму надо

        А где здесь задается сужение? Ниче не понял.

        Добавлено
        Но работает :D
          Цитата DIS @
          А где здесь задается сужение? Ниче не понял.

          через бордеры. Это примерно как известная техника делать треугольнички с помощью обычного border-top\bottom\left\right

          Добавлено
          хотя яб делал влоб, ибо подбирать соотношение оных - проще убиться. Влоб == before\after элемент c transform: rotate(?deg)
          user posted image user posted image user posted image
            для таких фигур есть специальный модуль называется SVG
              Morr123 svg не кешируется в Blink браузерах - это связано с одним багом: https://bugs.chromium.org/p/chromium/issues/detail?id=580809 Из этого следует, что при ререндере лайаута (например при изменении стилей ДОМа) - оно всё перерисовывается, подозреваю что и при скроллах тоже.

              Предваряя вопросы - да, багу может и поправили, но не забываем о мобильных браузерах, которые:
              1) Не обновляются
              2) Медленные (ресурсы телефона какбэ)

              Из чего следует, что
              1) svg использовать можно лишь в самых крайних случаях, когда просто нет других вариантов
              2) Когда ресурс внутренний и\или не рассчитан на мобильные телефоны
              user posted image user posted image user posted image
                Вот спасибо за информацию) Учту)
                Подпись выключена.
                1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
                0 пользователей:


                Рейтинг@Mail.ru
                [ Script Execution time: 0,0968 ]   [ 16 queries used ]   [ Generated: 12.11.19, 00:25 GMT ]