How do I keep the content area inside of an SVG shape without moving to outside of shape when resizing window

Question

I need to place a SVG triangle shape to background and place some texts on that shape. I have tried this. but when resize the window, contents are moving to outside. I need to keep content area inside of triangle shape.

And i need to know the best way is use a container or container-fluid for this.

Below image shows what i need
https://i.sstatic.net/rwPxF.jpg

This is sample one i tried.

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}

div {
  display: block
}

section.services {
  width: 100%;
}

.class50 {
  float: left;
  width: 50%
}

.svg-content {
  position: relative;
  margin-top: -10%;
}

.class50_content {
  position: absolute;
  top: 35%;
  width: 35%;
  left: 20%;
}

.class50_content h2 {
  color: white;
}

.shape1.flip {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  top: 0;
  width: 80%;
  z-index: 0;
  left: 0;
}

<section class="services pt-5">
  <div class="class50">
    <div class="svg-content">
      <div class="shape1 flip">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1083.06 1721.53">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #10a2bd;
                            }
                        </style>
                    </defs>
                    <path id="Shape_3_copy" data-name="Shape 3 copy" class="cls-1" d="M1082.36-4.17-.69,884.2l1083.06,833.16" transform="translate(0.69 4.17)"></path>
                </svg>
      </div>
      <div class="class50_content">
        <h2>Morbi vesti...</h2>
        <h3>Sed sagittis diam eu purus dictum</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed recusandae in sunt fugit eveniet ratione facere quis consequatur! Nihil quia obcaecati quam aspernatur odio labore vero doloribus cupiditate sed.</p>
        <a href="#" class="btn btn-2">Read More</a>
      </div>
    </div>
  </div>
  <div class="class50">
    <h2>Test 123</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nemo, harum tempore quasi quae, tempora eveniet officiis labore iste natus atque aliquam ab quia optio sequi voluptatibus molestiae architecto, quos.</p>
  </div>
</section>

Answer 1

I need to keep content area inside of triangle shape.

The only way to fullfill this condition is to used fixed sizes for both the content area and the shape, and to move the shape left at the same rate as the content area.

As this means the shape will be wider than 50% of the viewport most of the times, the content on the right half consequently will overlap the shape. This is a conflict of goals. If the shape was restricted to 50% of the width, the content would not fit inside for small screen sizes.

body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, sans-serif;
}

div {
  display: block
}

section.services {
  width: 100%;
}

.class50 {
  float: left;
  width: 50%
}

.svg-content {
  position: relative;
  margin-top: -10%;
}

.class50_content {
  position: absolute;
  top: 35%;
  width: 265px;
  left: 20%;
}

.class50_content h2 {
  color: white;
}

.shape1.flip {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  position: relative;
  top: 0;
  width: 550px;
  z-index: 0;
  left: calc(20% - 150px);
}

<section class="services pt-5">
  <div class="class50">
    <div class="svg-content">
      <div class="shape1 flip">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1083.06 1721.53">
                    <defs>
                        <style>
                            .cls-1 {
                                fill: #10a2bd;
                            }
                        </style>
                    </defs>
                    <path id="Shape_3_copy" data-name="Shape 3 copy" class="cls-1" d="M1082.36-4.17-.69,884.2l1083.06,833.16" transform="translate(0.69 4.17)"></path>
                </svg>
      </div>
      <div class="class50_content">
        <h2>Morbi vesti...</h2>
        <h3>Sed sagittis diam eu purus dictum</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi sed recusandae in sunt fugit eveniet ratione facere quis consequatur! Nihil quia obcaecati quam aspernatur odio labore vero doloribus cupiditate sed.</p>
        <a href="#" class="btn btn-2">Read More</a>
      </div>
    </div>
  </div>
  <div class="class50">
    <h2>Test 123</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nemo, harum tempore quasi quae, tempora eveniet officiis labore iste natus atque aliquam ab quia optio sequi voluptatibus molestiae architecto, quos.</p>
  </div>
</section>