Сделал блок (снипет снизу) Но никак не получается перевернуть треугольник наоборот кверху для другого блока.Подскажите как можно сделать,как по примеру на картинке. Пробовал менять бордеры с левых на правые, но получается, что они накладываются друг-на-друга Вот как хотелось бы 'перевернуть' стиль.
body {
background: white;
margin: 0px; }
body .under-title {
font-size: 15px;
color: white;
width: 33%;
text-align: center;
margin-left: auto;
margin-right: auto; }
body .title-img {
padding: 10px;
margin: 240px 0 30px;
font-size: 42px;
color: white;
text-align: center; }
body .main-img {
background-image: url(http://news.mit.edu/sites/mit.edu.newsoffice/files/images/2016/MIT-Earth-Dish_0.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover; }
body .main-img .triangle-holder {
overflow: hidden;
bottom: 0;
height: 325px; }
body .main-img .triangle-1 {
width: 0;
height: 0;
border-bottom: 31vw solid white;
border-right: 100vw solid transparent;
float: left; }
body .main-img .triangle-2 {
width: 0;
height: 0;
border-bottom: 31vw solid white;
border-left: 100vw solid transparent; }
@media screen and (max-width: 1024px) {
body .main-img .triangle-holder {
height: 175px !important; } }
<div class="main-img">
<div class="img" >
<div class="title-img">
asd sda das
</div>
<div class="under-title">
asdasdsda ad asdas aksdkladakl dkasd as
</div>
</div>
<div class="triangle-holder">
<div class="triangle-1"></div>
<div class="triangle-2"></div>
</div>
</div>