Как на сайте сделать скошенные углы блоку?
Константин
652
0
Александр, будь добр помоги советом как сделать скошенные углы блока как на картинке. И чтобы в этот блок можно было вставлять контент и менять фон при необходимости помимо белого цвета. Интересует на данный момент белый блок. Очень надо! Спасибо
Изображения:
- авиаввиа.jpg 8,2 kb
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии ()
Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.
src=«http://itchief.ru/assets/uploadify/c/5/5/c555bccb2b38546b6cc7d5b4e0c33b9es.jpg» class=«fancybox thumbnail center»> Провбовал вариант из ссылки и другие тоже. Не понимаю что я сделал не так. Главное в прошлом варианте все работало, а сейчас не хочет. Кстате вот скрипт из прошлого варианта:
itchief.ru/lessons/bootstrap-3/119-bootstrap-3-customize-the-navbar#comment-2638
Попробую обязательно. Я вчера правда организовал это дело по другому немногою Сделал 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. Первой и второй задал класс для фона заготовленных картинок, в средней задал класс для любого фона.
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>