Triangle and inverted triangle using CSS borders

Question

I am trying to execute the following example image using CSS borders. Is it possible? Also, is it possible to also be responsive? I started the violin here. I know that I saw it somewhere, but I can’t remember where.

Here is what I still have -

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

Well, I tried to achieve what you wanted, please check this code and look at this Fiddle

Note. This must be achieved using two triangles, as CSS triangles are drawn using borders.

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;
}