HTML
CSS

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

Константин 278

17.10.2016, 17:23

1.3K

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

Скриншот:

Блок со скошенными углами

Очень надо! Спасибо.

Ответы: 9

Аноним

20.10.2016, 14:21

Скрипт для сворачивания мобильного меню:

Аноним

22.10.2016, 14:14

Попробуйте проверить, может быть, у вас есть ошибки в консоли браузера. Например, поместили данный код до подключения библиотеки jQuery и bootstrap.js.

Аноним

20.10.2016, 14:09

Не закрывается зараза:

Не сворачивается такой вид меню при нажатии на ссылку

Пробовал вариант из ссылки и другие тоже. Не понимаю что я сделал не так. Главное в прошлом варианте все работало, а сейчас не хочет. Кстати вот скрипт из прошлого варианта :

<!-- скрипт для сворачивания мобильного меню -->
<script>
$(function(){ 
  var navMain = $(".navbar-collapse");
  navMain.on("click", "a", null, function () {
    navMain.collapse('hide');
   });
 });
</script>
<!-- скрипт для сворачивания мобильного меню конец -->

Аноним

20.10.2016, 13:35

Ну я в принципе тоже так думаю в плане svg. Ибо растровый не очень смотрится в плане изгибов, пиксели заметны после обрезки картинки. Спасибо за совет!

Аноним

18.10.2016, 14:30

И еще один вопрос по теме меню в мобильном виде. Не могу найти скрипт по работе которого, при нажатии на ссылку в меню, оно автоматически закрывалось. Я старой версии сайта который делал все нормально осуществил. А сейчас что-то не получается. И приходится тапать по гамбургеру чтобы закрыть меню. Сможешь с этим вопросом помочь?

Аноним

20.10.2016, 13:12

Попробуй посмотреть решение в этом комментарии.

Аноним

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. Первой и второй задал класс для фона заготовленных картинок, в средней задал класс для любого фона.

Аноним

20.10.2016, 13:15

Если фон не сложный может тогда лучше использовать в качестве изображения формат svg. Тем более, что его можно изменить с помощью CSS и JavaScript.

Аноним

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>