I made a block (snippet from below). But I can’t turn the triangle upside down to the other side upwards for another block. Tell me how you can do it, like in the example on the picture. I tried to change the boarders from left to right, but it turns out that they overlap with each other. This is how I would like to turn over the style.

enter image description here

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>

    1 answer 1

     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 { width:100%; position:absolute; 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; } .triangle-holder { width: 0; height: 0; border-style: solid; border-width: 137px 310px 0 310px; border-color: #007bff transparent transparent rgba(88, 67, 67, 0); position: relative; top: 137px; z-index: 999; overflow: hidden; height: 0; } @media screen and (max-width: 1024px) { body .main-img .triangle-holder { height: 175px !important; } } 
      <div class="triangle-holder"> <div class="triangle-1"></div> <div class="triangle-2"></div> </div> <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>

    • The browser is frozen, the first answer was incorrect)) are you about this form? @ddeadlink - Arsen
    • Yes, I’m talking about this view) when the screen is maximized, I get a cropped view and a cut out triangle I would like to be on top - ddeadlink
    • maybe I misunderstood the question) "But it’s impossible to turn the triangle upside down for another block" can you turn the triangle 180 degrees? - Arsen
    • Sorry, maybe I incorrectly asked a question. It is necessary that the picture be instead of a purple background, as in the picture in the example above - ddeadlink
    • I corrected, so correctly understood? - Arsen