Треугольник и перевернутый треугольник с использованием границ CSS

Question

Я пытаюсь выполнить следующий пример изображения, используя границы CSS. Это возможно? Кроме того, возможно ли это также быть отзывчивым? Я начал скрипку here. Я знаю, что видел это где-то, но не могу вспомнить, где.

Вот то, что я до сих пор -

HTML

<div class="container"> 

    <div class="row"> 

     <div class="sign-up col-sm-9"> 

      <div class="col-sm-4"> 

       <h3>SIGN UP to get the latest updates on Security News</h3> 

      </div> 

      <div class="col-sm-4"> 

      </div> 

      <div class="col-sm-4"> 

      </div> 

     </div> <!-- /.sign-up -->   

     <div class="invert"></div> 

      <div class="submit col-sm-3"> 

       <input type="submit" value="Submit"> 

      </div> 

    </div> <!-- /.row --> 

</div><!-- /.container --> 

CSS -

.sign-up { 
    background: #002d56; 
    padding: 0px 0px; 
    color: #ffffff; 
    font-size: 20px; 
} 

.sign-up h3{ 
    padding: 10px 0px; 
    font-size: 20px; 
} 

.sign-up:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 70px solid #ffffff; 
    border-bottom: 69px solid #ffffff; 
    border-left: 70px solid #002d56; 
    position: absolute; 
    right: 0; 
} 

.invert { 
    position:relative; 
} 

.invert:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    border-top: 70px solid #cfab7a; 
    border-bottom: 69px solid #cfab7a; 
    border-left: 70px solid #ffffff; 
    position: absolute; 
    right: 118px; 
} 

.submit { 
    background: #cfab7a; 
    width: 0; 
    height: 0; 
} 

.submit:before { 

} 

.submit input[type="submit"] { 
    background: #cfab7a; 
    padding: 10px 0px; 
    border: none; 
} 

Answer 1

Ну, я пытался добиться того, что вы хотите, пожалуйста, проверьте этот код и посмотрите на это Fiddle

Примечание:Это должно быть достигнуто с двумя треугольниками, так как CSS треугольники рисуются с использованием границ.

HTML:

<div class="rectangle"></div> 
<div class="hidden-div"> 
    <div class="big-triangle"></div> 
    <div class="triangle"></div> 
    </div> 

CSS:

.triangle { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 63px 0 63px 80px; 
    border-color: transparent transparent transparent #007bff; 
    position:absolute; 
} 
.big-triangle { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 80px 0 80px 100px; 
    border-color: transparent transparent transparent #fff; 
    position:absolute; 
    top:-17px; 
} 
.rectangle { 
    background-color:#007bff; 
    width:300px; 
    height:125px; 
    position:absolute; 
} 
.hidden-div { 
    width:300px; 
    height:110px; 
    position:absolute; 
    left:50px; 
}