Как на сайте сделать скошенные углы блоку?

Константин
Константин
1K
9
Содержание:
  1. Комментарии
Александр, будь добр помоги советом как сделать скошенные углы блока как на картинке. И чтобы в этот блок можно было вставлять контент и менять фон при необходимости помимо белого цвета. Интересует на данный момент белый блок. Очень надо! Спасибо
Изображения:

Комментарии:

  1. Константин
    Константин
    20.10.2016, 14:21
    1. Александр Мальцев
      Александр Мальцев
      22.10.2016, 14:14
      Попробуйте проверить, может быть, у вас есть ошибки в консоли браузера. Например, поместили данный код до подключения библиотеки jQuery и bootstrap.js.
    2. Константин
      Константин
      20.10.2016, 14:09
      не закрывается зараза <img
      src=«http://itchief.ru/assets/uploadify/c/5/5/c555bccb2b38546b6cc7d5b4e0c33b9es.jpg» class=«fancybox thumbnail center»>
      Провбовал вариант из ссылки и другие тоже. Не понимаю что я сделал не так. Главное в прошлом варианте все работало, а сейчас не хочет. Кстате вот скрипт из прошлого варианта:


      1. Константин
        Константин
        20.10.2016, 13:35
        Ну я впринципе тоже так думаю в плане svg. Ибо растровый не очень смотрится в плане изгибов, пиксили заметны после обрезки картинки. Спасибо за совет!
        1. Константин
          Константин
          18.10.2016, 14:30
          И еще один вопрос по теме меню в мобильном виде. Не могу найти скрипт по работе которого, при нажатии на ссылку в меню, оно автоматически закрывалось. Я старой версии сайта который делал все нормально осуществил. А сейчас что то не получается. И приходится тапать по гамбургеру чтобы закрыть меню. Сможешь с этим вопросом помочь?
          1. Александр Мальцев
            Александр Мальцев
            20.10.2016, 13:12
          2. Константин
            Константин
            18.10.2016, 14:25
            Спасибо Александр!
            Попробую обязательно. Я вчера правда организовал это дело по другому немногою Сделал 3 строки и две картинки заранее приготовленных в фотошопе. И впервой и третьей строке разместил картинки. А в средней текст. Есть конечно неудобства с нижней частью(при растягивании средней части приходится менять высоту нижней картинки.) Но зато получилось))) Может твой метод будет намного лучше. Вот код css к трем строкам:
            /* скошеный блок!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

            .firstimg{
            background: url(img/11.png) no-repeat center center;
            background-size: cover;
            height: 80px;
            }
            .fonblock1{
            background: url(img/social.jpg) no-repeat center center;
            background-size: cover;
            height: 910px;
            }

            .secendimg{
            background: url(img/111.png) no-repeat center center;
            background-size: cover;
            height: 80px;
            position: relative;
            margin-top: 7px;
            }
            /* скошеный блок конец!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
            Ну а в разметке html: поместил три строки row. Первой и второй задал класс для фона заготовленных картинок, в средней задал класс для любого фона.
            1. Александр Мальцев
              Александр Мальцев
              20.10.2016, 13:15
              Если фон не сложный может тогда лучше использовать в качестве изображений формат svg. Тем более что его можно изменить с помощью css и javascript.
            2. Александр Мальцев
              Александр Мальцев
              18.10.2016, 13:55
              Попрбуйте использовать CSS Shape.
              CSS:
              div.shape {
                width: 100%;
                height: 300px;
                background: green;
                -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
                clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 85%);
              }
              
              HTML:
              <div style="position:relative;">
                <div class="shape"></div>
                <div style="position:absolute; top:0px; left:0px; width: 100%; height: 300px;">
                    Содержимое блока...
                </div>
              </div>
              
              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.