Как сверстать направленный вниз треугольный блок? [дубликат]

222

05 февраля 2020, 03:20

На этот вопрос уже даны ответы здесь:

Как сделать из квадратного div`a треугольный? (2 ответа)

Закрыт 1 год назад.

Подскажите пожалуйста как верстаются такие блоки?

Answer 1

Можно так (оставшиеся блоки добавите, думаю с этим проблем не будет):

body { 
  margin: 0; 
  padding: 0; 
} 
.header { 
  width: 100%; 
  height: 300px; 
  background: #0064d9; 
  background-image: url(https://www.gokunming.com/en/blog/image/big/12025.jpg); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
h3 { 
  color:#f0f0f0;  
} 
.content { 
  display: flex; 
  flex-direction: row; 
  height: 100%; 
  width: 100%; 
} 
.content-down { 
  display: flex; 
  flex-direction: row; 
} 
.triangle { 
  width: 100%; 
} 
.left-block { 
  width: 50%; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  height: 100%; 
} 
.right-block { 
  width: 50%; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  position: relative; 
  height: 100%; 
} 
.main-content { 
  background: #39cccc; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  position: absolute; 
  height: 100%; 
} 
.left-triangle { 
  display: flex; 
  flex-direction: column; 
  position: absolute; 
  width: 100%; 
  left: 0; 
  bottom: 100%; 
} 
 
.right-triangle { 
  display: flex; 
  flex-direction: column; 
  position: absolute; 
  width: 100%; 
  right: 0; 
  bottom: 100%; 
}

<div class="header"> 
  <h3>WE CREATE DESIGN THAT YOU WILL LOVE</h3> 
</div> 
<div class="content"> 
  <div class="left-block"> 
    <div class="left-triangle"> 
      <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 500 85" preserveaspectratio="none"> 
        <polygon class="left" points="0,0   0,86   500.8,86   500.8,75.5" fill="#39cccc"></polygon> 
      </svg> 
    </div> 
  </div> 
  <div class="right-block"> 
    <div class="right-triangle"> 
      <svg class="triangle" xmlns="http://www.w3.org/2000/svg" viewbox="500 0 500 85" preserveaspectratio="none"> 
        <polygon class="right" points="1000,0   1000,86   500,86   500,75.5" fill="#39cccc"></polygon> 
      </svg> 
    </div> 
  </div> 
</div> 
<div class="main-content"></div>

Answer 2

Вот ещё один вариант реализации:

Можете посмотреть на Codepen, если Вам так удобнее: ссылка

body { 
  margin: 0; 
  padding: 0; 
} 
 
.test { 
  padding: 72px 0px 220px; 
  position: relative; 
  margin-bottom: 101px; 
  background-color: #222222; 
} 
 
.test::before { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  content: ''; 
  width: 50%; 
  padding-top: 4%; 
  background: #ffffff; 
  -ms-transform: skew(0, 4.5deg) translate(0, 50%); 
  -webkit-transform: skew(0, 4.5deg) translate(0, 50%); 
  -moz-transform: skew(0, 4.5deg) translate(0, 50%); 
  -o-transform: skew(0, 4.5deg) translate(0, 50%); 
  transform: skew(0, 4.5deg) translate(0, 50%); 
} 
 
.test::after { 
  position: absolute; 
  bottom: 0; 
  right: 0; 
  content: ''; 
  width: 50%; 
  padding-top: 4%; 
  background: #fff; 
  -ms-transform: skew(0, -4.5deg) translate(0, 50%); 
  -webkit-transform: skew(0, -4.5deg) translate(0, 50%); 
  -moz-transform: skew(0, -4.5deg) translate(0, 50%); 
  -o-transform: skew(0, -4.5deg) translate(0, 50%); 
  transform: skew(0, -4.5deg) translate(0, 50%); 
}