• HTML
  • CSS

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

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

Скриншот:

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

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

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

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


Константин
Константин
Ну я впринципе тоже так думаю в плане svg. Ибо растровый не очень смотрится в плане изгибов, пиксили заметны после обрезки картинки. Спасибо за совет!
Константин
Константин
И еще один вопрос по теме меню в мобильном виде. Не могу найти скрипт по работе которого, при нажатии на ссылку в меню, оно автоматически закрывалось. Я старой версии сайта который делал все нормально осуществил. А сейчас что то не получается. И приходится тапать по гамбургеру чтобы закрыть меню. Сможешь с этим вопросом помочь?
Александр Мальцев
Александр Мальцев
Константин
Константин
Спасибо Александр!
Попробую обязательно. Я вчера правда организовал это дело по другому немногою Сделал 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. Первой и второй задал класс для фона заготовленных картинок, в средней задал класс для любого фона.
Александр Мальцев
Александр Мальцев
Если фон не сложный может тогда лучше использовать в качестве изображений формат svg. Тем более что его можно изменить с помощью css и javascript.
Александр Мальцев
Александр Мальцев
Попрбуйте использовать 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>