0

Добрый день. Собственно, сабж. Делаю лендинг, имеется вот такой "участок" с треугольниками:

введите сюда описание изображения

Не приходит ничего в голову кроме как подгружать изображение, но и этот вариант не самый лучший (я молчу про лишний запрос к серваку) - на больших экранах изображение обрезается снизу и становится вот таким.

Как правильно реализовать такой блок?

1
  • можно на svg сделать. 12 июн 2017 в 11:05

2 ответа 2

4

Пример

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

section {
    min-height: 100px;
    background: #fff;
    position: relative;
}
section:nth-of-type(2) {
    background: #F5F5F5;
    padding-top: 70px;
    text-align: center;
}
section:nth-of-type(2):before,
section:nth-of-type(2):after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
}
section:nth-of-type(2):before {   
    border-width: 50px 50vw 0 50vw;
    border-color: #fff transparent transparent transparent;    
}
section:nth-of-type(2):after{    
    border-width: 50px 0 50px 50vw;
    border-color: transparent transparent transparent #F9F9F9;
}
<section></section>
<section>
    <h2>Title</h2>
</section>

2

Как-то так.

.tr{
	width: 50%;
	height: 0;
	padding-left: 25%;
	padding-top: 25%;
	overflow: hidden;
}
.tr div {
	width: 0; 
	height: 0;
	margin-left:-500px;
	margin-top:-500px;
	
	border-left: 500px solid transparent;
	border-right: 500px solid transparent;
	border-top: 500px solid #4679BD;
}
<div class = "tr">
  <div></div>
</div>

Останется только растянуть по ширине блока.

Более подходящие варианты без лишних выкрутасов описаны в этом ответе.

2
  • 1
    что-то не похоже
    – teran
    12 июн 2017 в 11:08
  • @teran, обновил ответ. 12 июн 2017 в 11:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.