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

    Прикреплённый файлПрикреплённый файлdiv.jpg (7,08 Кбайт, скачиваний: 981)
    Нужно что бы он книзу сужался
    как сделать?
      А все допер сам
      Вот каму надо
      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)
            для таких фигур есть специальный модуль называется SVG
              Morr123 svg не кешируется в Blink браузерах - это связано с одним багом: https://bugs.chromium.org/p/chromium/issues/detail?id=580809 Из этого следует, что при ререндере лайаута (например при изменении стилей ДОМа) - оно всё перерисовывается, подозреваю что и при скроллах тоже.

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

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


                Рейтинг@Mail.ru
                [ Script execution time: 0,0247 ]   [ 17 queries used ]   [ Generated: 28.03.24, 15:20 GMT ]